不知有没有小伙伴用过canvas合成图片，然后爆炸

报错截图

尼玛，然后各种搜索，不外乎以下几种坑爹处理方案：

后端处理，比如Access-Control-Allow-Origin "*"(要是请求到其他网站的图片就不适用了，比如我要请求到微信的图片)

前端处理，比如img.setAttribute('crossOrigin', 'anonymous');

试了下，尼玛还是报错，折腾个半天过去了，下班了，一大早上的在群里问了下，有个大神说和跨域没关系吧 你本地不好测 测试环境可以的

抱着试一试的态度，丢到服务器上，一访问，尼玛，竟然不报错了，我真的是RI

效果图

效果图

示例代码

canvas合成网络图片

#h {

text-align: center;

}

#h canvas {

border-radius: 10px;

}

$(function () {

var bg = {

width: 340,

height: 500,

src: "https://oimageb5.ydstatic.com/image?id=3493803499422546314&product=adpublish&w=1280&h=720&sc=0&rm=2&gsb=0&gsbd=60"

}

var code = {

width: 100,

height: 100,

src: "./images/kf.jpg"

}

var userInfo = {

name: "嘉成大叔",

width: 170,

height: 170,

src: "http://thirdwx.qlogo.cn/mmopen/BEMV4WOAicktAAllnv9FdJFSU7QYVibMU62ctg7Ie5HiaCuDVCyiapibwrs48N97yrzLel03FvOUqAHEZGfBY5tCdnuHKEg4YvZSC/132"

}

var image = new Image();

var image1 = new Image();

var image2 = new Image();

image.src = bg.src;

image1.src = code.src;

image2.src = userInfo.src;

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

image.onload = function () {

ctx.drawImage(image, 0, 0, bg.width, bg.height);

ctx.drawImage(image1, 250, 100, code.width, code.height);

ctx.save();

ctx.arc(185, 200, 65, 0, Math.PI * 2, false);

ctx.clip();

ctx.drawImage(image2, 80, 80, userInfo.width, userInfo.height); // 在刚刚裁剪的园上画图

ctx.restore(); // 还原状态

ctx.font = "36px Georgia";

ctx.fillStyle = '#ffffff';

ctx.fillText(userInfo.name, 270, 250);

var mainImg = new Image();

var imgSrc = canvas.toDataURL('image/png')

mainImg.src = imgSrc;

$('#h').html("");//移除已生成的避免重复生成

$('#h').append(mainImg);

}

})