最近做了一個分享頁面，要求長按保存相冊，其中用到了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 = https://blog.csdn.net/jinxi1112/article/details/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碼顯示）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/2763.html
標籤：其他