canvas实现整个页面画成一张图片并进行分享，解决获取线上图片报错问题(1)

也就是说canvas不允许跨域访问。怎么解决这个问题呢？

重点代码：

var cav = $(‘canvas’)[0],

ctx = cav.getContext(‘2d’)

var img = new Image()

// 允许跨域，后端需要在响应头添加’Access-Control-Allow-Origin: *'(cors解决跨域)

img.crossOrigin = ‘*’

img.onload = function() {

var r=38;

var x=10;

var y=25;

var d=10;

ctx.save();

var d =2 * r;

var cx = x + r;

var cy = y + r;

ctx.arc(cx, cy, r, 0, 2 * Math.PI);

ctx.clip();

ctx.drawImage(img, x, y, d, d);

ctx.restore();

try {

// 读取图片base64 [不传会默认读取为image/png格式，不可压缩] [如果把png图片读取为image/jpeg，那么透明区域会变黑，可大幅度压缩质量] [如果读取为image/webp格式，只有谷歌支持读取和显示这种格式]

var base64 = cav.toDataURL()

console.log(base64)

// canvas 转换为 img

$(‘#user_imgs’)[0].src = base64

} catch(err) {

// 报错’Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.'表示图片需同源

console.warn(‘图片需同源’)

}

}

// src最后赋值，为了兼容ie8

img.src = thumbnail_image_url;

if(thumbnail_image_url != ‘’) {

img.src = thumbnail_image_url

} else {

img.src = ‘./images/head-portrait.png’

}

这个代码中包含了如何获取微信头像，以及解决跨域问题（注意需要线上测试才能看到微信头像），还有canvas将微信头像变圆的方法。

下面放上整个案例的代码以供参考：

请升级浏览器