html2canvas图片截图截不到图像的问题解决

本文介绍了解决网页中图片跨域显示的方法,通过在img标签中添加crossOrigin属性,并在服务端设置响应头允许跨域。同时,强调了前端使用html2canvas截图时需确保CORS启用及图片加载完成的重要性。

解决思路:

在回显图片后,给img标签动态的加上crossOrigin="anonymous"属性

然后

服务端开启跨域response.setHeader("Access-Control-Allow-Origin","*");

并且开启CORS(重要)

前端等图片加载完后再截图(重要)

截图JS代码(会来百度的都看的懂):useCORS记得开起来,很重要!!!

html2canvas($("#capture")[0], {
    useCORS: true,
    backgroundColor:null,
}).then(canvas => {
    let imgUri = canvas.toDataURL("image/png").replace("image/png","image/octet-stream")
    console.log(imgUri);
})

 

 

 

 

评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值