不知有沒有小伙伴用過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);

}

})