Html2Canvas使用避坑🧭

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现

它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。

• 基本语法

html2canvas(element, options);
html2canvas(document.body, {
 onrendered: function(canvas) {
  var url = canvas.toDataURL();//图片地址
  document.body.appendChild(canvas);
 },
 width: 300,
 height: 300

html2canvas基本参数说明

• 生成的图片里面缺失图片

其实涉及到的就是跨域问题,即便是canvas的画布中对于图片的域也是有要求的,那我们应该怎么解决呢?

html2canvas的配置项中配置 allowTaint:true 或 useCORS:true(二者不可共同使用)

img标签增加 crossOrigin=’anonymous’图片服务器配置Access-Control-Allow-Origin 或使用代理

其中第三步是最重要的,不设置则前两步设置了也无效。 服务器需要配置 Access-Control-Allow-Origin信息,如PHP添加响应头信息，*通配符表示允许任意域名： header(“Access-Control-Allow-Origin: *”); 复制代码或者指定域名：

header("Access-Control-Allow-Origin: xxx");

• 生成的图片有缺失元素

因为html是动态生成的，所以最好加上setTimeout延时转换成canvas，不然可能html的dom元素还没加载完’

• 要转换成图片的 html，其css样式要有几点注意：

亲测不能使用rem为单位定义文字大小、元素宽高等，不然无法显示该元素 不能添加background，假如设置背景颜色为红色或者一张背景图，莫名其妙会多出一个元素

• 生成的图片模糊不清且有锯齿瑕疵 实践可知scale和dpi可用,推荐使用scale参数。

        let imgHeight = window.document.querySelector('.content').offsetHeight // 获取DOM高度
        let imgWidth = window.document.querySelector('.content').offsetWidth // 获取DOM宽度
        let scale = window.devicePixelRatio // 获取设备像素比
        html2canvas(window.document.querySelector('.content'), {
            useCORS: true,
            scale: scale,
            width: imgWidth,
            height: imgHeight
        }).then((canvas) => {
          window.document.querySelector('.content').remove()
          let elemImg = `<img src='${canvas.toDataURL('image/png')}' id='canvas-img' style='height: ${imgHeight}px;border-radius: 10px;width:${imgWidth}px'/>`
          window.document.querySelector('.container').innerHTML = elemImg
        })

• 高分辨率下，文字模糊

此为预料中的情况，获取了设备像素比 window.devicePixelRatio 百分比伸展 canvas 画布即可……才怪……

然后发现这是 0.5 版本需要做的操作，1.0 版本的默认参数 scale 已经设置好了，但还是不太清晰。

最后从掘金处得到启发，最终解决方法是！！

一律设为 4 倍！即

html2canvas(ele, {
    sacle: 4
}).then((canvas) => {});