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...
