2 . 常見問題
參考官方文件
生成的過程在客戶端，高併發的場景下減少伺服器的壓力。
方案簡單開發成本低，
canvas 的相容問題
dataurl的相容問題
css 不支援一下屬性
再者html2canvas 還是預覽版，不是很穩定，官方文件上不推薦使用在生產環境
1.0.0 rc 5 版本有問題，需要降級使用1.0.0 rc4
[github issues](
通過配置設定scroll 位置
window.
scrollto(0,0)
github issues
移動端一般只用開啟配置項的usecors（庫會給image新增crossorigin： anonymous），即可解決
const tobloburl =
(function()
;return
function
(url:
string))
;}; img.
onerror
=(e)
=>;}
);};
})()
;// 批量處理
function
converttoblobimage
(targetnode: element | nodelist, timeout:
number
)else
}elseif(
!(nodelist instanceof
array)&&
!(nodelist instanceof
nodelist))
if(nodelist.length ===0)
return promise.
resolve()
;// 僅考慮
return
newpromise
((resolve)
=>
, timeout);}
let count =0;
// 逐一替換資源位址
for(
let i =
0, len = nodelist.length; i < len;
++i));
} p.
finally((
)=>);
}});
}export
default converttoblobimage;
最簡單的方式就是拿到html2canvas的返回結果canvas 轉換為dataurl
const imgdata = canvas.
todataurl
('image/jpeg'
)
瀏覽器平台長按
a標籤uc
ios√xuc
安卓√x360 極速
iosx
x360安卓√
xqq瀏覽器
ios√
xqq瀏覽器安卓√
xsafrai
ios√√夸克
ios√-夸克
安卓√-搜狗
ios√x搜狗
安卓√xchrome
ios√
√chrome安卓√
√samsung安卓√
√高質量前端快照方案：來自頁面的「**」
html2canvas使用記錄
該外掛程式，我使用的是1.0.0 rc.4版本，網上提到的舊版本的一些問題，基本都得到了解決，比如手機端截圖模糊問題，跨域快取問題，都沒有出現 注意1 對高度高於視窗的內容截圖時，要確保滾動條在頂部，否則擷取的頂部會出現空白 2 在本地測試時候，如果使用的是本地，需要通過url形式訪問此頁面，如果直...
html2canvas 問題總結
1 使用最新版本1.0.0 alpha.9舊版本的問題比較多 2 不能使用transform 否則位置會有偏移 html2canvas不支援transform 3 居中布局也會發生偏移 display flex justify content center align items center 4 ...
html2canvas 實現dashed虛線邊框
html2canvas是乙個將html元素生成canvas的庫，繪製的canvas大部分樣式和css一致。比如截止1.0.0 alpha.12，虛線邊框依然繪製為實線，border collapse依然有問題。這裡根據github issues裡的乙個思路，模擬實現了dashed邊框效果。適用情況 ...