移动端html2canvas总结

前言

公司项目需要动态生成一个公益证书，需要对html转成图片供用户保存转发，一开始就想到用canvas，后来百度找到有html2canvas这个插件，就用起来了。

问题

一开始我的html背景图是用background-image,导致图片不清晰，找了好久才知道要用image标签才清晰，改用image后发现手机端不清晰，改来改去，找来找去，终于搞到高清的合成图了，直接上代码：

代码

 /* 证书转图片 */
    function toCanvas() {
        var w = $("#cer-canvas").width();
        var h = $("#cer-canvas").height();
        var scaleBy = getDpr();
        //要将 canvas 的宽高设置成容器宽高的 2 倍
        var canvas = document.createElement("canvas");
        canvas.width = w * scaleBy;
        canvas.height = h * scaleBy;
        canvas.style.width = w + "px";
        canvas.style.height = h + "px";
        var context = canvas.getContext("2d");
        //然后将画布缩放，将图像放大两倍画到画布上
        context.scale(scaleBy, scaleBy);
        console.log('scale' + getDpr())
        html2canvas(document.querySelector("#cer-canvas"), {
            background: "#fff",
            allowTaint: true,
            width: w,
            height: h,
            canvas: canvas,
            scale: scaleBy
        }).then(canvas => {
            context.mozImageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.msImageSmoothingEnabled = false;
            context.imageSmoothingEnabled = false;
            var url = canvas.toDataURL("image/png", 1); // base64数据
            document.querySelector("#certify").src = url
        });

    }
  /**
       * 根据 window.devicePixelRatio 获取像素比
       * @returns {number}
       * @constructor
       */
    function getDpr() {
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
            return window.devicePixelRatio;
        }
        return 1;
    }

通过getDpr方法动态获取手机的像素比，从而正确的放大canvas，网上也有人统一放大2倍或4倍，