由於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});
 

//建立一個img物件，在頁面上顯示列印的資料
    var img = document.createElement("img");
    img.src = data;
    document.body.appendChild(img);

具體程式碼請看案例網址：