关于H5页面中生成图片的两种方式！

前言：

我们在做项目过程中，经常会遇到自定义生成一张图片并可以长按保存。长按保存图片在微信等浏览器中默认就有，那么对于生成图片的有哪些方式呢？

方法一： 利用canvas绘制图形，然后生成图片

代码如下：

/**
 * 绘制canvas
 */
function draw(name='大威德', score = 23, level = 1, str = '哈哈哈哈') {
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    // 绘制背景
    var img = new Image();
    img.src = "images/newbg.jpg";
    img.onload = function () {
        ctx.drawImage(img, 0, 0,375,640);
        // 绘制底部文字
        ctx.font = "bold normal 20px Microsoft YaHei";
        ctx.fillStyle = "black";
        ctx.fillText(name, 375 * 0.18, 640 * 0.34);
        ctx.font = "bold normal 20px Microsoft YaHei";
        ctx.fillStyle = "red";
        ctx.fillText(score, 375 * 0.63, 640 * 0.345);
        ctx.fillStyle = "black";
        ctx.fillText(level, 375 * 0.37, 640 * 0.458);
        ctx.font = "normal 18px Microsoft YaHei";
        ctx.fillStyle = "black";
        // 绘制多行文字
        canvasTextAutoLine(str, c, 375 * 0.1, 640 * 0.5, 20);

　　　　　　var imgsrc = c.toDataURL("image/jpeg",1);

    };

}
/*
str:要绘制的字符串
canvas:canvas对象
initX:绘制字符串起始x坐标
initY:绘制字符串起始y坐标
lineHeight:字行高，自己定义个值即可
*/
function canvasTextAutoLine(str, canvas, initX, initY, lineHeight) {
    var ctx = canvas.getContext("2d");
    var lineWidth = 0;
    var canvasWidth = document.documentElement.clientWidth;
    var lastSubStrIndex = 0;
    for (let i = 0; i < str.length; i++) {
        lineWidth += ctx.measureText(str[i]).width;
        if (lineWidth > canvasWidth * 0.8) {//减去initX,防止边界出现的问题
            ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
            initY += lineHeight;
            lineWidth = 0;
            lastSubStrIndex = i;
        }
        if (i == str.length - 1) {
            ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
        }
    }
}

 

小结：这种方式较为繁琐，因为绘制canvas的过程本身过程较多，远远没有布局一个页面简单。

方法二：利用html2canvas实现截屏功能（原理也是将DOM对象生成canvas对象，然后再生成图片）

 如下：你的html引入html2canvas后，把id为result的dom先生成canvas,然后canvas生成图片。即可实现类似截屏效果！

 html2canvas(document.getElementById('result'), { scale: 2, logging: false, useCORS: true }).then(function (canvas) {
        var dataUrl = canvas.toDataURL();
        console.log(dataUrl)
        that.imgsrc = dataUrl;
});

 

小结：这种方式较简单，而且清晰度较高，但是要注意的是，一定不能把图片当背景来操作，否则清晰度也不高。

综上：

利用前端H5生成图片过程中，我们应该更多利用方式二来进行！