自用笔记：本文属于自用笔记，不做详解，仅供参考。在此记录自己已理解并开始遵循的前端代码规范。What How Why

生成图片Canvas

toDataURL

Uncaught (in promise) DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

问题原因：
Canvas为了安全性考虑，当绘制了外部图片后它会变成只可写不可读的状态，getImageData、toDataURL之类的试图读取数据的方法全都无法使用。理论上开启了CORS的资源应该被允许读取，只是IMG元素发起的请求默认并不带Origin字段，没能应用上CORS。

request Headers请求头Origin:

origin主要是用来说明最初请求是从哪里发起的；
origin只用于Post请求，而Referer则用于所有类型的请求；
origin的方式比Referer更安全点吧。

• 基于 canvas 实现的一个截图小 demo
• CORS与Canvas图片toDataURL

Access-Control-Allow-Origin

Access to Image at ‘http://wx4.sinaimg.cn/mw690/4b4d632fgy1fieo66xwy4j20io0goq46.jpg‘ from origin ‘http://172.16.20.115:8780‘ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://172.16.20.115:8780‘ is therefore not allowed access.

CORS解决

前端实现’截图’效果的几种方式

html2canvas html截图插件图片放大清晰度解决方案，支持任意放大倍数，解决原插件图片偏移问题
html2canvas 将代码转为图片

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦