setTimeout(() => {
const canvas = document.createElement('canvas') // 创建一个canvas节点
const posterBox = this.$refs.posterBoxRef
const width = posterBox.offsetWidth // 获取dom 宽度
const height = posterBox.offsetHeight // 获取dom 高度
const scale = 2 // 定义任意放大倍数 支持小数
canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
const rect = posterBox.getBoundingClientRect() // 获取元素相对于视口的
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 获取滚动轴滚动的长度
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft // 获取滚动轴滚动的长度
html2canvas(posterBox, { // 转换为图片
x: rect.left, // 绘制的dom元素相对于视口的位置
y: rect.top,
scrollX: scrollLeft ,// 滚动的长度
scrollY: -scrollTop,
scale: scale, // 添加的scale 参数
width: width, // dom 原始宽度
height: height,
useCORS: true, // 开启跨域
dpi: window.devicePixelRatio * 2
}).then(canvas => {
const context = canvas.getContext('2d')
// 关闭抗锯齿
context.mozImageSmoothingEnabled = false
context.msImageSmoothingEnabled = false
context.imageSmoothingEnabled = false
const imgUrl = canvas.toDataURL('image/png', 0.5) // 0.5为质量系数
this.sHref = imgUrl
}, 1000)
- dom数据是从后端获取的,要使用setTimeout()
- dom中不能使用省略样式
- 要设置scrollX和scrollY,避免生成的图片错位(有大量白框)
- 微信中,固定滚动,用this.$refs获取元素的scroll,如果使用event.target再滚动整个页面高度的时候会出现undefined情况
- css中设置了font-family在调用html2canvas方法后会自动刷新
- 配合jspdf生成pdf的时候,canvas高度超过10000以后一些,会出现生成报错error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData,解决方案,是生成多个pdf文件,发送到后端,让后端合成
解决方案: 需要截图的节点根样式添加font-variant: normal;
2. 文字向下偏移。
解决方案: 指定html2canvas的版本号为1.0.0-alpha.12
3. 不完整,缺失,留白。
出现情况: 当截图区域超过视图高度,且滚动条未处在顶部时,会出现。
解决方案: 截图之前控制滚动条至顶部。
4. 模糊,不清晰。
出现情况: 通常是图片设置为背景的情况下,截图会比较模糊。
解决方案: 将背景图通过img标签加定位的方式实现。
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来。在项目遇到的坑是图片能生成,可是生成的图片总是往左偏移一部份内容,让显示的图片不完整页面渲染的内容,而生成的图片效果要跟页面渲染的内容一致,下面是渲染的效果而实际生成的图片是不完整的测试:多次生成图片发现图片发生偏移的位置都不相同,而同一个特性是往左...
html2canvas border-bottom 多行错位,只在最后一行显示并且还错位效果如下图:image.png页面代码如下:.cnt {color: #ffcd03;text-align: center;border-bottom: 0.04rem solid #fff;}我是来测试啦~为啥子呢?沃德天修改如下:添加一个从第二行开始包一层标签(p、div),注意千万不要用span.cnt...
对于一个角度项目,我试图将包含HTML代码的字符串变量转换为pdf文件。我安置了所有的家属,比如:jspdf格式光栅化HTML我的代码如下:b64DecodeUnicode(str) {return decodeURIComponent(atob(str).split('').map(function(c) {return '%' + ('00' + c.charCodeAt(0).toStrin...
最近在做智能图片相关问题,关于文字高度居中方案反复做了不少尝试。canvas有textAlign和textBaseline两个属性设置文字的对应方式。但是这两个属性是用来设置文本内整体的对齐方式,无法实现在在一个整体居中。文字结构:就像是写字的时候一样,分为上中下田子方格。真正的字体区分中文,英文的大小写,在上下两行,不同的字,在上下结构中,并没有占据完全,或者说文字中存在一定的阴影,会有存在一定的像素值。
这个有很多隐藏的bug, 不太建议在生产环境中使用推荐使用vdom包装一层, 用fabric画到canvas中, 或者用后端去画, 再或者用无头浏览器去截图而且对于mac和windows的chrome表现也不一致....下面是转换出来的canvas, 用beta版本还可以接受, 但是依然丢失了文字 用官方的版本转换出来的有问题 body {width: 100vw;height: 100vh;di...