关于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生成图片过程中，我们应该更多利用方式二来进行！