前言
最近項目需求總是有HTML頁面生成圖片功能,所以就想記錄一下自己在過程中遇到的問題,並加深印象,日後如果忘了也可以回顧。我們項目使用的是html2canvas插件,還有其他插件,例如dom-to-image、rasterizehtml,可以根據需求使用。
html2canvas使用問題彙總
項目中引入的是0.5.0-beta4版本的cdn鏈接,直接調用方法html2canvas(dom,options);第一個參數是你要繪製的dom對象,第二個參數是一些繪製的配置參數,個別參數我嘗試了也沒搞清楚具體什麼作用可以自行看html2canvas文檔,對於我用到的直接上代碼:
// 生成圖片
function generateImg() {
var shareContent = document.body;// 需要繪製的部分的 (原生)dom 對象 ,注意容器的寬度不要使用百分比,使用固定寬度,避免縮放問題
var width = shareContent.offsetWidth; // 獲取(原生)dom 寬度
var height = shareContent.offsetHeight;
var offsetTop = shareContent.offsetTop; //元素距離頂部的偏移量
// var rect = shareContent.getBoundingClientRect();
var canvas = document.createElement('canvas'); //創建canvas 對象
var context = canvas.getContext('2d');
var scaleBy = 3; //像素密度 (也可以採用自定義縮放比例)
canvas.width = width * scaleBy; //這裏 由於繪製的dom 爲固定寬度,居中,所以沒有偏移
canvas.height = (height + offsetTop) * scaleBy; // 注意高度問題,由於頂部有個距離所以要加上頂部的距離,解決圖像高度偏移問題
canvas.height = height * scaleBy;
// context.translate(0, -offsetTop); // 畫布偏移
context.scale(scaleBy, scaleBy);
html2canvas(shareContent, {
logging: true, // 是否打印日誌,默認false
taintTest: true, //檢測每張圖片都已經加載完成
scale: scaleBy, // 添加的scale 參數
canvas: canvas, //自定義 canvas
width: width, //dom 原始寬度
height: height, //dom 原始高度
useCORS: true, //允許跨域
onrendered: function(canvas) { // 頁面繪製成功後的回調
var url = canvas.toDataURL("image/png");
// 生成圖片後的操作
}
});
}
圖片模糊解決
- 由於像素比(DPR = 設備像素/CSS像素)的問題,電腦上截圖看着還行,到手機上就會非常模糊。繪製圖片時可以根據像素比把圖片放大,使用時在定義圖片的寬度,也可以自定義縮放比。縮放比也不是越大越好,太大了也可能會出問題。計算像素比的代碼:
function getPixelRatio(context){
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
}
- 繪圖時儘量不要使用背景圖片,直接使用img這樣會更清晰
圖片跨域問題
有次頁面中使用了微信頭像,設置了useCORS: true
不能顯示頭像,設置allowTaint:true
直接報錯不能使用toDataURL可能無法導出受污染的畫布;web前端開發資源Q-q-u-n: 767273102 ,內有免費開發工具,零基礎,進階視頻教程,希望新手少走彎路
- 修改Nginx配置文件,由於我們項目其他地方也用到了,所以不便修改,可以修改的參考:
location ^~ /wechat_image/ {
add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
proxy_pass http://thirdwx.qlogo.cn/;
}
- 把圖片轉換成base64格式並設置CrossOrigin=“anonymous”,嘗試後有緩存的情況下還是不能正常生成圖片,需要在後面拼接一個隨機參數解決緩存問題,Android可以了,但ios上還是不行。
- 後來發現直接在微信頭像的img標籤上設置CrossOrigin="anonymous"即
<img class="user-img" th:src="${wxUser.headImgUrl}" alt="" crossOrigin="anonymous" />
,微信頭像的請求頭來就有access-control-allow-origin: *,Android和ios上都可以了,如果你之前嘗試過其他方法,可能需要清下緩存,不然Android會誤導你不能正常顯示。 - 最近又發現一個html2canvas的options裏配置proxy爲跨域的url。
生成圖片替換頁面時閃現問題
前面幾次生成圖片,都沒有出現這個問題,最近一次出現了替換時頁面一閃,以爲是不是圖片太大了,我將兩個活動的圖片保存對比並不是,具體我還是沒搞清楚,不過通過先在dom中寫一個空的img標籤然後生成的src替換給img,判斷圖片加載完成後再將繪製的dom隱藏掉解決了這個問題。
css樣式超出顯示省略號消失
html2canvas不支持css樣式生成省略號,百度找到了解決方法,通過js判斷超過父盒子高度時用省略號替換
$(".info_text_box").each(function () {
var divH = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > divH) {
$p.html($p.html().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});
引入web字體時字體還沒有顯示就生成圖片
window.onload=function(){}
是等頁面資源加載完畢再執行,但是在ios中並不支持,後來發現當字體大小大於300px時不同字體的寬度差別很大,就通過定時器判斷字體大小來判斷字體是否加載成功,但最總因爲字體文件加載太慢,就放棄了使用特殊字體
// 通過判斷字體內容寬度判斷字體加載完成
function fn_fontWatch(fontFamily, cb) {
function fn_gen_span_with_font(font) {
var span=document.createElement('span');
span.style.cssText = "display:block;position:absolute;top:-9999px;left:-9999px;font-size:300px;width:auto;height:auto;line-height:normal;margin:0;padding:0;font-variant:normal;white-space:nowrap;font-family:" + font;
span.innerHTML = 'BESbswy';
document.body.append(span);
return span;
};
var span_default = fn_gen_span_with_font('serif');
var span_default_width = span_default.offsetWidth;
document.body.removeChild(span_default);
var span_font = fn_gen_span_with_font(fontFamily + ',serif');
var fn_check_loop = function() {
if(span_default_width !== span_font.offsetWidth){
document.body.removeChild(span_font);
cb();
} else {
window.setTimeout(fn_check_loop,500);
}
};
fn_check_loop();
};
其他問題
- 一次活動需要判斷進入頁面次序,html2canvas是通過遍歷dom繪製圖片的,當生成圖片時除了js都會重新執行一次,導致類似刷新頁面記錄次序,最後次序通過ajax請求獲取解決了問題;
- html2canvas只會截取頁面中可見的內容,設置了
display: none
、visibility:hidden
的元素是截取不到的 - 生成圖片時文字有些許變化,比如安卓的數字1就變化特別明顯,而且文字的位置有點下移,原因我沒找到,影響不大,目前我也沒解決;