前端使用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,浏览器会自动弹出是否保存图片)

原文地址:https://www.cnblogs.com/qdcnbj/p/10320007.html