您现在的位置是:群英 > 开发技术 > web开发
Canvas可以跨域吗,如何解决
Admin发表于 2022-06-23 17:08:1540 次浏览
在这篇文章中我们会学习到关于“Canvas可以跨域吗,如何解决”的知识,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望对大家学习或工作能有帮助。下面就请大家跟着小编的思路一起来学习一下吧。

 


Canvas 跨域如何解决?这里记录下使用 Canvas 绘图过程中所遇到的跨域问题和解决方案。

先来看下实现方法。

实现方法

目标图片一般是由 图片 + 文本 构成。无论是千奇百怪的大小图片,还是变幻莫测的各式文本,都能用 canvas api drawImage 和 fillText 方法来完成。

基本流程如下:

获取 canvas 上下文 -- ctx

const canvas = document.querySelector(selector)
const ctx = canvas.getContext('2d')

绘图

忽略图片上的内容,直接用 drawImage 将其画到 canvas 画布上即可。

const image = new Image()
image.src = src
image.onload = () => {
    ctx.save()
    // 这里我们采用以下参数调用
    this.ctx.drawImage(image, dx, dy, dWidth, dHeight)
    this.ctx.restore()
}

drawImage 有3种参数使用方式,具体用法可以查看 MDN 文档。

获取图像数据

调用 HTMLCanvasElement DOM 对象提供的 toBlob(), toDataURL() 或 getImageData() 方法,即可。

canvas.toBlob(blob => {
    // 你要的 blob
}, mimeType, encoderOptions)

这里的 mimeType 默认值为 image/png。encoderOptions 指定了图片质量,可用于压缩,不过需要 mimeType 格式为 image/jpeg 或者 image/webp。

Canvas 跨域

正常情况下,如果需要将绘制好的图像输出,我们可以调用 canvas 的 toBlob(), toDataURL() 或 getImageData() 方法来获取到图像数据。然而,遇到图片跨域的情况就有些尴尬了。可能回报如下错误:

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

或者

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

先来看看第2种情况。

Access-Control-Allow-Origin
如果你跨域使用某些图片资源,并且该服务未正确响应 Access-Control-Allow-Origin 头信息, 则会报出如下错误信息:

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

说明不允许跨域访问,那么你可以试着让后台修改 Access-Control-Allow-Origin 的值为 * 或 your.website, 或者改用同域资源(考虑下?)。

接下来,我们来解决第1种情况。

img.crossOrigin = 'Anonymous'
为避免未经许可拉取远程网站信息而导致的用户隐私泄露(如 GPS 等信息,具体可搜索 Exif),在调用 canvas 的 toBlob(), toDataURL() 或 getImageData() 会抛出安全错误:

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

如果你的图片服务允许跨域使用(如果不允许,见上条),那么你该考虑下给 img 元素加上 crossOrigin 属性,即:

const image = new Image()
image.crossOrigin = 'Anonymous'
image.src = src

如此,你便可以拿到图片数据了。如果没招,换同域资源吧~


到此这篇关于“Canvas可以跨域吗,如何解决”的文章就介绍到这了,感谢各位的阅读,更多相关Canvas可以跨域吗,如何解决内容,欢迎关注群英网络资讯频道,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: html5
相关信息推荐
2022-05-06 18:09:44 
摘要:在开发小程序中,有时候在小程序中有很多漂亮的图片,用户想要下载,但是长按保存没效果,截图?又显得太low,所以,给用户个好的体验,给用户进行图片下载的功能。
2022-05-18 17:37:09 
摘要:一、gateway网关简介api 网关是介于客户端和服务器端之间的中间层,所有的外部请求都会先经过api 网关这一层。也就是说,api 的实现方面更多的考虑业务逻辑,而安全、性能、监控可以交由 api
2022-05-27 18:02:31 
摘要:springboot和springmvc区别:1、Spring MVC提供了一种轻度耦合的方式来开发web应用,它是Spring的一个模块,是一个web框架;2、Spring Boot实现了自动配置,降低了项目搭建的复杂度。
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部