html5將文字生成圖片

原文鏈接：https://blog.csdn.net/qq_30100043/article/details/76549377

本文鏈接：https://blog.csdn.net/qq_30100043/article/details/76549377
由於canvas能夠將畫布上的紋理生成數據給img顯示出來，所以，我們在html5裏面可以實現將文字生成圖片顯示。

首先我書寫了一個將文字繪製到canvas上面的函數，然後函數會返回canvas繪製的紋理數據。
 

//繪製文字到canvas，判斷換行位置，和設置canvas高度
    function canvasWrapText(options) {
        var settings = {
            canvas:document.getElementsByTagName("canvas")[0], //canvas對象，必填，不填寫默認找到頁面中的第一個canvas
            canvasWidth:480, //canvas的寬度
            drawStartX:10, //繪製字符串起始x座標
            drawStartY:30, //繪製字符串起始y座標
            lineHeight:30, //文字的行高
            font:"24px 'Microsoft Yahei'", //文字樣式
            text:"請修改掉默認的配置", //需要繪製的文本
            drawWidth:460, //文字顯示的寬度
            color:"#000000", //文字的顏色
            backgroundColor:"#ffffff", //背景顏色
        };
 
        //將傳入的配置覆蓋掉默認配置
        if(!!options && typeof options === "object"){
            for(var i in options){
                settings[i] = options[i];
            }
        }
 
        //獲取2d的上線文開始設置相關屬性
        var canvas = settings.canvas;
        canvas.width = settings.canvasWidth;
        var ctx = canvas.getContext("2d");
 
        //繪製背景色
        ctx.fillStyle = settings.backgroundColor;
        ctx.fillRect(0,0,canvas.width,canvas.height);
 
        //繪製文字
        ctx.font = settings.font;
        ctx.fillStyle = settings.color;
        var lineWidth = 0; //當前行的繪製的寬度
        var lastTextIndex = 0; //已經繪製上canvas最後的一個字符的下標
        //由於改變canvas 的高度會導致繪製的紋理被清空，所以，不預先繪製，先放入到一個數組當中
        var arr = [];
        for(var i = 0; i<settings.text.length; i++){
            //獲取當前的截取的字符串的寬度
            lineWidth = ctx.measureText(settings.text.substr(lastTextIndex,i-lastTextIndex)).width;
            
            if(lineWidth > settings.drawWidth){
                //判斷最後一位是否是標點符號
                if(judgePunctuationMarks(settings.text[i-1])){
                    arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex));
                    lastTextIndex = i;
                }else{
                    arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex-1));
                    lastTextIndex = i-1;
                }
            }
            //將最後多餘的一部分添加到數組
            if(i === settings.text.length - 1){
                arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex+1));
            }
        }
 
        //根據arr的長度設置canvas的高度
        canvas.height = arr.length*settings.lineHeight+settings.drawStartY;
 
        ctx.font = settings.font;
        ctx.fillStyle = settings.color;
        for(var i =0; i<arr.length; i++){
            ctx.fillText(arr[i],settings.drawStartX,settings.drawStartY+i*settings.lineHeight);
        }
 
        //判斷是否是需要避開的標籤符號
        function judgePunctuationMarks(value) {
            var arr = [".",",",";","?","!",":","\"","，","。","？","！","；","：","、"];
            for(var i = 0; i< arr.length; i++){
                if(value === arr[i]){
                    return true;
                }
            }
            return false;
        }
 
        return canvas.toDataURL();
    }
 
    //調用函數獲取到img的data數據
    var data = canvasWrapText({canvas:document.getElementById("canvas"),text:string});

然後將獲取到的data數據賦值給img的src，然後這個img就會顯示出來canvas設置的數據，然後將圖片保存即可。

//創建一個img對象，在頁面上顯示打印的數據
    var img = document.createElement("img");
    img.src = data;
    document.body.appendChild(img);

具體代碼請看案例網址：

https://johnson2heng.github.io/PicClipUpload/text.html