前端使用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