Canvas.toDataURL的时候出现跨域问题

众所周知啊 浏览器为了安全性 有同源策略..大家在开发工作中时常会遇到...
忘记的同学可以看看这篇文章回顾一下九种跨域方式实现原理
根据文章 image的 src、 link的 href、 scrpit的 src不存在跨域问题

可是当我们使用canvas去绘制我们想要的图片(大多是个性化的二维码分享图)的时候
使用canvas.toDataURL api获取url的时候
可能会遇到跨域问题 如图

对不起 跨域咯

注意 如果仅仅是展示 不会有问题 但是如果你需要获取url做其他事情的时候 就会有同源策略的问题

咦? 这是为什么呢 为什么toDataURL会存在跨域呢 image不是不会跨域的吗...
我的理解是

仅仅是image的src属性不存在跨域 而当image被canvas使用的时候 获取地址就会报错了... 因为他们的文件源不一样，所以跨域

这里给出解决方案

1. image的src的图片地址放在项目的同一域名下(推荐方法 简单粗暴 以免后患)

2.给image添加跨域头

例子

var img = new Image();//创建一个image标签
img.src = '地址';
//解决图片跨域的问题
img.crossOrigin = 'Anonymous';
var canvas = document.getElementById('canvas的id');
var ctx = canvas.getContext("2d");
ctx.drawImage(img,264,805);//绘制图片

这样就不会存在跨域问题了...

当然 为了这个功能大多数是需要image 长按下载
此时我们可以写个canvas 设置display:none; 然后用canvas的api 画好我们想要的图片的时候 在获取src 丢到页面的image标签里

喜欢本片文章的话 请点个喜欢吧!

参考文章

https://www.cnblogs.com/Amcc/p/7110021.html
https://blog.csdn.net/qq_42341025/article/details/86676966