解决html2canvas相关问题（模糊，跨域，偏移，兼容）

admin管理员组

文章数量:1580436

一、生成图片不清晰

最终生成的图片不清晰有以下几种情况
1.使用背景图片：如果背景为图片的话，建议不使用background: url(‘图片地址’)，而使用img标签来做背景
2.整体图片像素不清：可使用html2canvas中的scale与dpi配置来进行放大

html2canvas(dom,{
	scale: 2, //放大
    dpi: 300 // 处理模糊问题
})

二、图片跨域

当使用不同域的图片时生成的图片空白

解决方法：配置中添加useCORS: true，img标签增加crossOrigin='anonymous'，需要图片来源方配合允许跨域方法设置

html2canvas(dom,{
	useCORS: true
})

三、截取图片向下偏移

如下图所示，当页面有滚动条并滚动时，截取的图片上方有一部分空白

解决方法：1.获取页面滚动条滚动的高度，并在配置中配置scrollY: -scrollTop

const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 获取滚动轴滚动的长度
html2canvas(dom,{
	useCORS: true,
    scrollY: -scrollTop,
    scrollX: 0,
    scale: 2, //放大
    dpi: 300 // 处理模糊问题
})

2.生成图片是让页面滚动到顶部window.scroll(0, 0)

window.scroll(0, 0) // 首先先顶部
html2canvas(dom,{
	useCORS: true,
    scrollY: 0,
    scrollX: 0,
    scale: 2, //放大
    dpi: 300 // 处理模糊问题
})

四、图片向左偏移

如下图所示，生成的海报图向左偏移

原因:有可能外层元素使用了transform或者transition等一些不支持的css3新属性，导致生成的海报偏移

github issues

解决方法：
1.生成图片时覆盖外层的这些不支持的属性，等生成完毕后在恢复
2.将要生成图片的dom复制一份追加到最外层，生成图片后在删除

	  window.scroll(0, 0) // 首先先顶部
      const targetDom = this.$refs['goodsDetail'] // 获取要截图的元素
      const copyDom = targetDom.cloneNode(true) // 克隆一个
      copyDom.style.width = targetDom.scrollWidth + 'px'
      copyDom.style.height = targetDom.scrollHeight + 'px'
      document.body.appendChild(copyDom) // 添加
      const rect = copyDom.getBoundingClientRect()
      document.body.appendChild(copyDom) // 添加
      html2canvas(copyDom, {
      	x: rect.left,
        y: rect.top,
        useCORS: true,
        width: copyDom.clientWidth,
        height: copyDom.clientHeight,
        scrollY: 0,
        scrollX: 0,
        scale: 2,
        dpi: 300 // 处理模糊问题
      })
      .then((canvas) => {
        document.body.removeChild(copyDom) // 用完要删除
        this.shareUrl= canvas.toDataURL()
       })

五、IOS手机生成的图片向下偏移，安卓正常

这个找了好久的问题都没找到，最后才发现是版本的问题

原因：使用了最新的"html2canvas": "^1.0.0-rc.7"版本出现了问题，把版本降到"html2canvas": "^1.0.0-rc.4"解决

本文标签： 模糊html2canvas跨域