前段时间遇到产品一个需求，在移动端上合成生成二维码，并且合成背景图和二维码给用户保存;
当时我在想，链接拼接生成二维码这个没什么，图片合成在移动端来做，结果后端的小伙伴说他们有现成的方案，他们合成，最后也就让后端做了；
最后想想，前端其实做起来也很方便啊，搞起！
-
兼容性，浏览器支持canvas，似乎这是最核心最低的门槛，自己确认了一下兼容性
形式一片大好
-
问题分析
合成，也就是将一个背景图，一个二维码图放在一个容器内，那么canvas不是有一个drawImage可以把图片给画进去么？最后再照葫芦画瓢画二维码，最后toDataURL把base64编码的图片信息导出给img标签不就OK啦！
// bgSize，qrSize为对应图的尺寸
// bgUrl，qrUrl为对应图的地址
// qrX，qrY为偏移值，target为你展示的img标签的class或者id
const canvas = document.createElement("canvas");
if (canvas.getContext) {
canvas.width = bgSize;
canvas.height = bgSize;
let ctx = canvas.getContext('2d');
ctx.fillRect(0 ,0, bgSize, bgSize);
ctx.fillStyle='transparent';
ctx.fill();
let bgImg = new Image();
// bgImg.crossOrigin = "anonymous";
bgImg.src = bgUrl;
bgImg.addEventListener("load", ()=> {
ctx.drawImage(bgImg, 0, 0, bgSize, bgSize);
let qrImg = new Image();
// qrImg.crossOrigin = "anonymous";
qrImg.src = qrUrl;
qrImg.addEventListener("load", ()=> {
ctx.drawImage(qrImg, qrX, qrY, qrSize, qrSize);
document.querySelector(target).src = canvas.toDataURL("image/png");
});
});
};
报错了
这是为什么呢？去搜索了很多，很多人说什么canvas不能使用跨域图片，问题都集中在跨域上；
跨域说对了一半，并不是canvas不能使用跨域图片，而是在用没有跨域权限图片导出信息时会报错，Canvas确实是为了安全性考虑，当绘制了外部图片后它会变成只可写不可读的状态，getImageData、toDataURL之类的试图读取数据的方法全都无法使用；
img.crossOrigin = "anonymous";
之后呢，其实也就是让前端开启了图片的跨域使用，为图片服务添加CROS（跨域）支持，具体方法是在图片的返回的header中添加Access-Control-Allow-Origin:*，同时在请求图片时，为image元素设置crossOrigin="" 属性设置为空字符串或者 "anonymous"，这样就可以跨域导出图片信息，也就是画图了;
这边MDN上就介绍了这个启用了 CORS 的图片;
最后一点呢，就是，如果这些跨域图片都是自己能够操作服务器开启CORS的当然是最好的，万一没有这个权限，或者操纵的图片对面直接设置了防盗链，前端在浏览器里面可就真的没办法了·····
