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