關於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生成圖片過程中，我們應該更多利用方式二來進行！