前端img不显示服务器图片,【前端】<img >加上crossOrigin=”anonymous”之后导致图片无法显示...

主要是想对跨域的图片进行裁剪保存

先是出现canvas.toDataURL()报错 网上资料说需要添加crossOrigin=”anonymous”允许跨域

但加了之后图片就无法显示了 我又新建了一个页面发现 只要是加了crossOrigin=”anonymous”就都无法显示 求大神帮忙,谢谢。

f461a058c88dc3fca0baf68752f012ef.png

回答

你从哪里找的答案。误人子弟啊,Access-C…A…O…字段是服务端添加了才有的,”响应头中就会附加”是什么鬼,你加了crossOrigin=”anonymous”是表明你想跨域获取这张图片,好用在canvas.toDataURL()上,但是服务端不一定同意啊,服务端添加了access…这个字段并且value是*或者你网站的域名才行,否则就认为你无权用,结果就是无法显示

参考:

http://stackoverflow.com/ques…

https://developer.mozilla.org…

https://developer.mozilla.org…

跨域图片能正常裁剪(图片未转化成base64),应该满足三个条件:

img元素中设置crossorigin属性

图片允许跨域,设置响应头Access-Control-Allow-Origin

使用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,都会导致报错。

哇啊啊啊啊啊啊啊啊!!

多谢 @拾指相扣 回答评论下的 @吴观涛 大大提供的方法!!

image.src = url + '?time=' + new Date().valueOf();

简直曲线救国啊啊啊!!一次解决!

完整代码

let image = new Image()

image.setAttribute('crossOrigin', 'anonymous')

image.src = url + '?time=' + new Date().valueOf();

let that = this;

image.onload = () => {

// ... do something

}

image.onerror = (err) => {

console.log(err)

};

canvas无法对跨域的图片进行操作,楼主想要的裁剪保存功能如果在纯前端实现必须使用canvas。所以楼主必须要开启允许跨域,其中,除了服务端要允许当前页面允许跨域之外,楼主执行canvas操作前也要开启跨域。

var img=new Image();

img.crossOrigin="anonymous";

img.src='https://';

ctx.drawImage(img, 0, 0, img.width, img.height);

我目前没弄懂 但是发现只要把代码放到服务器上就不报错了

要服务器和img同时设置 一起 还有一招上使用fileReader和url.createObjectUrl

你的图片是不是https的呀,我这下载http的就报跨域,https就能下载,地址也是http

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<properties> <hudson.security.AuthorizationMatrixProperty> <inheritanceStrategy class="org.jenkinsci.plugins.matrixauth.inheritance.InheritParentStrategy"/> <permission>USER:hudson.model.Item.Read:anonymous</permission> </hudson.security.AuthorizationMatrixProperty> <jenkins.model.BuildDiscarderProperty> <strategy class="hudson.tasks.LogRotator"> <daysToKeep>90</daysToKeep> <numToKeep>-1</numToKeep> <artifactDaysToKeep>30</artifactDaysToKeep> <artifactNumToKeep>-1</artifactNumToKeep> </strategy> </jenkins.model.BuildDiscarderProperty> <com.dabsquared.gitlabjenkins.connection.GitLabConnectionProperty plugin="gitlab-plugin@1.7.7"> <gitLabConnection>src.ift.run</gitLabConnection> <jobCredentialId/> <useAlternativeCredential>false</useAlternativeCredential> </com.dabsquared.gitlabjenkins.connection.GitLabConnectionProperty> <com.sonyericsson.rebuild.RebuildSettings plugin="rebuild@1.34"> <autoRebuild>false</autoRebuild> <rebuildDisabled>false</rebuildDisabled> </com.sonyericsson.rebuild.RebuildSettings> <hudson.plugins.throttleconcurrents.ThrottleJobProperty plugin="throttle-concurrents@2.11"> <maxConcurrentPerNode>3</maxConcurrentPerNode> <maxConcurrentTotal>0</maxConcurrentTotal> <categories class="java.util.concurrent.CopyOnWriteArrayList"/> <throttleEnabled>true</throttleEnabled> <throttleOption>project</throttleOption> <limitOneJobWithMatchingParams>false</limitOneJobWithMatchingParams> <paramsToUseForLimit/> <configVersion>1</configVersion> </hudson.plugins.throttleconcurrents.ThrottleJobProperty> <jenkins.branch.RateLimitBranchProperty_-JobPropertyImpl plugin="branch-api@2.1071.v1a_188a_562481"> <durationName>hour</durationName> <count>40</count> <userBoost>true</userBoost> </jenkins.branch.RateLimitBranchProperty_-JobPropertyImpl> </properties> 这是jenkin中 job定义中的一段,请解释这一段的含义
07-14
这段代码是 Jenkins Job 配置文件中的一部分,定义了一些与该 Job 相关的属性和插件配置。 让我们逐个解释每个属性的含义: 1. `<hudson.security.AuthorizationMatrixProperty>`:定义了 Jenkins 的权限矩阵属性,指定了该 Job 的权限设置。在这里,`<permission>` 元素指定了匿名用户对该 Job 的读取权限。 2. `<jenkins.model.BuildDiscarderProperty>`:定义了构建丢弃策略属性,该属性决定了构建历史的保留和丢弃规则。在这里,使用了 `<strategy>` 元素指定了构建日志保留的天数和数量限制。 3. `<com.dabsquared.gitlabjenkins.connection.GitLabConnectionProperty>`:定义了 GitLab 插件的连接属性,用于与 GitLab 服务器进行集成。在这里,`<gitLabConnection>` 元素指定了 GitLab 服务器的地址。 4. `<com.sonyericsson.rebuild.RebuildSettings>`:定义了重新构建插件的设置属性,用于允许或禁止重新构建 Job。在这里,`<autoRebuild>` 元素指定了是否自动重新构建。 5. `<hudson.plugins.throttleconcurrents.ThrottleJobProperty>`:定义了并发限制属性,用于限制并发执行 Job 的数量。在这里,`<maxConcurrentPerNode>` 元素指定了每个节点上允许的最大并发数量。 6. `<jenkins.branch.RateLimitBranchProperty_-JobPropertyImpl>`:定义了分支限制属性,用于限制 Job 分支的创建频率。在这里,`<durationName>` 元素指定了限制时间间隔的单位,`<count>` 元素指定了该时间间隔内允许的分支创建数量。 这些属性和插件配置可以根据你的需求进行修改和调整,以满足特定的工作流程和业务要求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值