天气预报说北京还有暴雨,疫情又严重了,大家出门在外注意安全。
言归正传!
canvas 能做的事情太多了,也让我爱上了这门技术,这段时间对他投入了很大精力。
canvas 在绘制内容的时候,会创建一块画布,这块画布是干净的,此时,你可以往上面画文字、画图片、还可以画视频等。在绘制图片的时候,图片可能会来源于其它域名,比如:
在网页 https://wsy.com/index.html
中创建一个 canvas 元素,在 canvas 上绘制一张图片,图片地址为
https://image/suyan.png(不支持跨域),一旦把图片绘制到 canvas 上,当你使用 canvas.toDataURL() 时会报一个安全问题:
其实调用getImageData(),toBlob() 这些 api 也会报错。
关于这个问题,MDN 上也有描述:
The canvas's bitmap is not origin clean; at least some of its contents have or may have been loaded from a site other than the one from which the document itself was loaded.
解决这个问题核心思路是解决图片的跨域问题。</