最近项目中遇到将整个页面都分享给朋友的需求,我们都知道如果长按页面的话只能发送其中的一个图片。所以最终选择用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将微信头像变圆的方法。
下面放上整