簡單記錄 html2canvas網頁中的圖片無法顯示的問題

html2canvas繪製圖片，如果頁面中存在img，出現繪製的結果無圖片時，原因如下：（建議逐步查找）

1.繪製時間過早，圖片尚未加載

解決方式：通過setTimeout延遲繪製或者通過img.onload監聽圖片是否繪製完成

2.繪製的圖片跨域問題

解決方式：圖片生成前，添加 image.crossOrigin = "*";

切記：要在圖片賦值之前添加

3.如果出現安卓或者pc端正常顯示，ios端無法顯示的問題

解決方式： 處理圖片跨域時，防止的位置不正確，正確方式如下

 var image = new Image();
    image.crossOrigin = "*";  // 必須在image之前賦值
    image.src = src + '?v=' + Math.random(); // 處理緩存

4.頁面的部分img，繪製後在ios上無顯示（親測多爲jpeg圖片）

解決方式： 將圖片轉化爲base64格式即可。

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var dataURL = canvas.toDataURL("image/png");  // 可選其他值 image/jpeg
    return dataURL;
}

function init(src, type) {
    var image = new Image();
    image.crossOrigin = "*";  // 必須在image之前賦值
    image.src = src + '?v=' + Math.random(); // 處理緩存
    image.onload = function(){
        var base64 = getBase64Image(image);
        if (type == 1){   // 區分是第幾個圖片
            $('#img1').attr('src',base64);
        } else if (type==2) {
            $('#img2').attr('src',base64);
            // 開始繪製
            setTimeout(function () {
                app.draw()
            },1000)
        }
        return base64
    }
}

5.字符串過長使用css隱藏，有特殊字符不顯示,如：

text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

使用上述css，隱藏字符串會出現繪製的圖片只有佔位不顯示的問題

現解決方案對字符進行裁剪（5位爲最佳）

function cutStr(str,L){
    var result = '',
        strlen = str.length, // 字符串長度
        chrlen = str.replace(/[^\x00-\xff]/g,'**').length; // 字節長度
    if(chrlen<=L){return str;}
    for(var i=0,j=0;i<strlen;i++){
        var chr = str.charAt(i);
        if(/[\x00-\xff]/.test(chr)){
            j++; // ascii碼爲0-255，一個字符就是一個字節的長度
        }else{
            j+=2; // ascii碼爲0-255以外，一個字符就是兩個字節的長度
        }
        if(j<=L){ // 當加上當前字符以後，如果總字節長度小於等於L，則將當前字符真實的+在result後
            result += chr;
        }else{ // 反之則說明result已經是不拆分字符的情況下最接近L的值了，直接返回
            return result;
        }
    }
}

6.文字重疊

1.設置文字居中，文字自動換行後文字有重疊   text-align: center;  

解決辦法： text-align: left; text-align: justify;等

2.使用了“ /” 分開語句。“/”可能與後面的字重疊

解決辦法： 使用全角來編寫“/”試試