html2canvas繪制圖片，如果頁面中存在img，出現繪制的結果無圖片時，原因如下：（建議逐步查找）
1.繪制時間過早，圖片尚未加載
解決方式：通過setTimeout延遲繪制或者通過img.onload監聽圖片是否繪制完成
2.繪制的圖片跨域問題
解決方式：圖片生成前，添加 image.crossOrigin = "*";
切記：要在圖片賦值之前添加
3.如果出現安卓或者pc端正常顯示，ios端無法顯示的問題
解決方式： 處理圖片跨域時，防止的位置不正確，正確方式如下
var image = new Image();
image.crossOrigin = "*"; // 必須在image之前賦值
image.src = https://blog.csdn.net/L95_0719/article/details/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 = https://blog.csdn.net/L95_0719/article/details/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.使用了“ /” 分開陳述句，“/”可能與后面的字重疊
解決辦法： 使用全角來撰寫“/”試試
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/2762.html
標籤：其他
上一篇：JS中的NaN