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

最近项目中遇到将整个页面都分享给朋友的需求，我们都知道如果长按页面的话只能发送其中的一个图片。所以最终选择用canvas来画一张图片。

           这个是需求图 

使用canvas画图不难，网上有很多案例，我这里要说的是canvas的一个坑：

canvas有同源策略的问题，这个之前还真的不知道，在这个需求中我需要获取个人的微信头像，但是当我在本地测试的时候会报错：

也就是说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将微信头像变圆的方法。 

下面放上整