最近做了一個分享頁面，要求長按儲存相冊，其中用到了html2canvas，使用比較簡單，但是遇到的比較常見的幾個坑，來做下總結：
1. 解決圖檔模糊和偏移
$('.share')是需要轉成圖檔的dom
function share(){
var width = $(
'.share')[
0].offsetWidth;
//dom寬
var height = $(
'.share')[
0].offsetHeight;
//dom高
// 解決圖檔模糊
var scale =
2;
//放大倍數
var canvas =
document.createElement(
'canvas');
canvas.width = width *
2;
canvas.height = height *
2;
canvas.style.width = width +
'px';
canvas.style.height = height +
'px';
var context = canvas.getContext(
'2d');
context.scale(scale, scale);
//設定context位置，值為相對于視窗的偏移量負值，讓圖檔複位(解決偏移的重點)
var rect = $(
'.share').get(
0).getBoundingClientRect();
//擷取元素相對于視察的偏移量
context.translate(-rect.left, -rect.top);
var opts = {
canvas: canvas,
useCORS:
true,
// 【重要】開啟跨域配置
scrollY:
0,
// 縱向偏移量 寫死0 可以避免滾動造成偶爾偏移的現象
};
html2canvas($(
".share")[
0], opts).then(
canvas => {
// 使用toDataURL方法将圖像轉換被base64編碼的URL字元串
var src = canvas.toDataURL();
// 顯示圖檔隐藏dom(圖檔生成後的操作)
$(
'.share-wrap').addClass(
'hidden');
$(
'.share-canvas').removeClass(
'hidden');
$(
'.share-canvas').find(
'img').attr(
'src', src);
});
}
查詢資料時，還發現了一種造成模糊的操作：使用背景圖檔，是以需要将所有圖檔轉為img前景圖
補充：使用vant元件的彈窗動畫也會産生偏移；生成圖檔的元素采用px機關
2.解決字型改變：
項目中需要用到黑體，直接設定font-family: "SimHei";不起做用，偶爾看到一篇文章了解到轉canvas的字型操作，使用浏覽器打開頁面時，浏覽器會讀取 HTML 檔案進行解析渲染，對于html中的文字會轉換成對應的 unicode碼，再根據HTML 裡設定的 font-family (如果沒設定則使用浏覽器預設設定)去查找電腦裡(如果有自定義字型@font-face ，則加載對應字型檔案)對應字型的字型檔案，找到檔案後根據 unicode 碼去查找繪制外形，找到後繪制到頁面上。
解決方案：font-family: "\9ED1\4F53"; (将字型轉成unicode碼顯示)
文章來源: blog.csdn.net，作者：jinxi1112，版權歸原作者所有，如需轉載，請聯系作者。
原文連結：blog.csdn.net/jinxi1112/article/details/101285998