html2canvas微信头像跨域,企业微信头像 前端使用canvas处理时跨域

在处理企业微信头像时遇到跨域限制,使用canvas绘制圆形时,正方形头像无法正常加载。通过设置`img.crossOrigin = ''`尝试解决,但仍有跨域警告。问题在于企业微信头像的域名导致了跨域限制,而普通微信头像不受此影响。寻求解决方案以确保能在canvas上正确绘制圆形头像。

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

拿到的企业微信头像是正方形 我需要使用canvas处理成圆形

但处理时发现会有跨域问题

正常微信的图片就没有问题 只有企业微信的域名头像会提示跨域

bVbHqTF

const canvas = document.createElement('canvas');

const contex = canvas.getContext('2d');

const img = new Image()

img.crossOrigin = ''

img.onload = function() {

var center = {

x: img.width / 2,

y: img.height / 2

}

var diameter = img.width

canvas.width = diameter

canvas.height = diameter

contex.clearRect(0, 0, diameter, diameter)

contex.save()

contex.beginPath()

var radius = img.width / 2

contex.arc(radius, radius, radius, 0, 2 * Math.PI) // 画出圆

contex.clip() // 裁剪上面的圆形

contex.drawImage(img, center.x - radius, center.y - radius, diameter, diameter, 0, 0, diameter, diameter) // 在刚刚裁剪的园上画图

contex.restore() // 还原状态

resolve(canvas.toDataURL('image/png', 1))

}

img.src = imgSrc

请问有没有办法解决这个跨域的问题

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值