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

var thumbnail_image_url = $_GET[‘thumbnail_image_url’];

console.log(thumbnail_image_url);

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’

}

$(“#qrcodeCanvas”).qrcode({

render: “canvas”, //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好

text: commonsUrl + “api/gxsc/invite/others/register?user_id=” + user_id, //扫描二维