如何安装网站程序,西安网站制作托,有关设计的网站,站长平台社区不知有没有小伙伴用过canvas合成图片#xff0c;然后爆炸报错截图尼玛#xff0c;然后各种搜索#xff0c;不外乎以下几种坑爹处理方案#xff1a;后端处理#xff0c;比如Access-Control-Allow-Origin *(要是请求到其他网站的图片就不适用了#xff0c;比如…不知有没有小伙伴用过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?id3493803499422546314productadpublishw1280h720sc0rm2gsb0gsbd60}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);}})
