在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
本文介绍了解锁canvas导出图片跨域的N种姿势小结,分享给大家,具体如下:
上面这个错误相信大家用canvas执行 toDataUrl导出图片的时候都遇到过,图片服务器域名和当前不一样,因为安全策略不允许跨域导出图片 解决这个跨越问题方式有多种 一 、将图片转换成base64 图片变成base64就没有域名一说了,自然不存在跨域 注意:图片转换成base64加增加图片文件大小,如果图片比较大,不建议转换base64,否则会增加网页加载时间,影响网站速度,这种方式一般适用于小图 二、 图片服务器设置允许跨域 即请求图片返回的响应头中带有 var canvas = document.getElementById('myCanvas') var ctx = canvas.getContext('2d') var img = document.createElement('img') img.crossOrigin="anonymous" img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.jpeg' img.onload = function() { ctx.drawImage(img,0,0,500,300); console.log(canvas.toDataURL()) } 这样前后结合跨域问题便迎刃而解 三、把图片放到当前域名下 原谅我不厚道的笑了,这的确是一种可以解决问题。 BUT 实际项目中图片一般都存储在cdn上,所以这种方式不太现实🌚🌝🌞 图片变成base64就没有域名一说了,自然不存在跨域 四、当图片服务没法设置跨域响应头时 确实有这种情况,比如获取第三方网站的头像,比如微信头像,然后前端动态生成新的图片,微信头像图片不允许跨域导出,怎么办??? 上面的几种方式都不好使 这种情况需要后端协助了,后端做一层转发,服务端获取头像,转换成base64返回前端,或者存储到本地允许跨域的服务器上,生产一个新的图片链接,返回给前端,这个时候结合方法一或者方法二,跨域问题也自然解决 如果你用的htmlToCanvas插件导出图片的话,则需要添加useCORS: true配置项,原理跟方法二一样,当然前置条件是图片域名允许跨域 至此我所知道的N中方式介绍完毕了,欢迎补充 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论