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

本文介绍了如何使用canvas技术将整个页面绘制为一张图片,并解决在线获取和显示图片时遇到的跨域问题,特别是针对微信头像的处理。在本地测试时,canvas会因同源策略报错,通过特定方法可以规避这一限制,实现线上正常显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

下面放上整

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

缘飞梦

如果觉得有用请您赞助一下,谢谢

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值