基本信息

案例ID:148293

技术顾问:HaHa Together! - 5年经验 - 中电

联系沟通

微信扫码,建群沟通

项目名称:保密项目

所属行业:企业服务 - 安全服务

->查看更多案例

案例介绍

跨域图片、视频能正常裁剪(图片未转化成base64),应该满足三个条件:
1、img元素中设置crossorigin属性
2、图片允许跨域,设置响应头Access-Control-Allow-Origin
3、使用js方式请求图片资源, 需要避免使用缓存,设置url后加上时间戳,或者http头设置Cache-Control为no-cache
主要原因是:
如果使用跨域的资源画到canvas中,并且资源没有使用CORS去请求,canvas会被认为是被污染了, canvas可以正常展示,但是没办法使用toDataURL()或者toBlob()导出数据,见Allowing cross-origin use of images and canvas。 所以通过在img标签上设置crossorigin,启用CORS,属性值为anonymous,在CORS请求时不会发送认证信息,见HTML attribute: crossorigin。
在启用CORS请求跨域资源时,资源必须允许跨域,才能正常返回,最简单的方式设置响应头Access-Control-Allow-Origin: *
图片已经通过img标签加载过,浏览器默认会缓存下来,下次使用js方式再去请求,直接返回缓存的图片,如果缓存中的图片不是通过CORS请求或者响应头中不存在Access-Control-Allow-Origin,都会导致报错。

相似案例推荐

其他人才的相似案例推荐

发布任务

企业点击发布任务,工程师会在任务下报名,招聘专员也会在1小时内与您联系,1小时内精准确定人才

微信接收人才推送

关注猿急送微信平台,接收实时人才推送

接收人才推送
联系需求方端客服
联系需求方端客服