前端使用html2canvas截圖,在canvas上繪制圖片及保存圖片


1、使用html2canvas
存在的問題:
不同的機型繪制位置不同的問題。
這個主要因為Html動態設置了html的dpr。(dpr可以解決屏幕顯示不了1pxborder和無法顯示小於12px的文字的問題)。
但是在繪制canvas時最好屏蔽這個屬性。這個屬性確定會導致html2canvas生成的canvas的尺寸不同。導致重新在此canvas里繪制圖片時,在不同機型上顯示的位置有出入。
使用canvas時一定要注意toDataUrl的跨域問題
 
2、點擊保存圖片
目前只有H5的,download方法。但是在手機上通用性不強。
只有和客戶端交互的方式來保存圖片。
 
3、生成2維碼圖片(qr_code)
4、長按保存圖片(直接生成圖片覆蓋在Html,瀏覽器會自動彈出是否保存圖片)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM