上传图片到图片服务器，因为域名不同，多以会有跨域问题。

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘http://img.xxx.com‘ is therefore not allowed access.

照看代码发现，cropper.js里面对图片的引用路径做了判断，给img标签添加了 crossorigin="anonymous"（匿名跨域属性）。

并且用了XMLHttpRequest 的get请求去访问img的引用路径，这样确实访问不到。需要在图片服务器，或者返回的请求头添加 Access-Control-Allow-Origin:*，或Access-Control-Allow-Origin:请求来源域名。

有一种简单快速的解决办法，就是直接去掉cropper.js里面跨域属性，因为默认情况下图片跨域也是可以显示的。

一、修改如下配置

// Check if the current image is a cross-origin image
checkCrossOrigin: false,// Check the current image's Exif Orientation information
checkOrientation: false,

二、处理如下代码

下面是原始代码:

 function getCrossOrigin(crossOrigin) {return crossOrigin ? ' crossOrigin="' + crossOrigin + '"' : '';}

下面是修改后的代码

function getCrossOrigin(crossOrigin) {return crossOrigin ? '' : '';
}

img元素中的crossorigin属性

img是我们在web开发中比较常用的一个标签，它代表着文档中的一个图像元素。HTML5给这个标签新增加了一个crossorigin属性，这个属性决定了图片获取过程中是否开启CORS功能

使用场景

在最近的项目开发中，有一个需求是让用户输入一个任意图片的url地址，在前端预览图片并让用户裁剪，再将裁剪好的图片上传到后端的服务器上。这里输入的图片地址很有可能来自第三方站点，这就涉及到一个跨域的问题，如果仅仅是展示预览图片的话是没有什么问题的，但这里裁剪图片时需要将裁剪好的图片进行base64编码，如果没有使用crossorign开启CORS功能的话，在使用canvas的toBlob()、toDataURL()和getImageData()方法时就会出现跨域的问题。

crossorigin属性

这个属性有两个值可选：
anonymous：如果使用这个值的话就会在请求中的header中的带上Origin属性，但请求不会带上cookie和其他的一些认证信息。
use-credentials：这个就同时会在跨域请求中带上cookie和其他的一些认证信息。
在使用这两个值时都需要server端在response的header中带上Access-Control-Allow-Credentials属性。
可以通过server的配置文件来开启这个属性：server开启Access-Control-Allow-Credentials

cropper 图片跨域相关推荐

上传图片截图预览控件不显示cropper.js 跨域问题
上传图片到图片服务器,因为域名不同,多以会有跨域问题. No 'Access-Control-Allow-Origin' header is present on the requested reso ...
解决Canvas.toDataURL 图片跨域问题
解决Canvas.toDataURL 图片跨域问题参考文章: (1)解决Canvas.toDataURL 图片跨域问题 (2)https://www.cnblogs.com/ajg016/p/547 ...
php把网络图片转化为base64格式，解决html2canvas图片跨域问题
一.前言最近在用html2canvas做网页截图功能.这个开源库使用很简单,代码也很方便,但难点在于跨域问题.比如说,我的一个页面中有图片也有文字,图片是来自于图片服务器的网络图片.此时我们要生成截 ...
JSPDF运用实例（解决图片跨域问题）
为什么80%的码农都做不了架构师?>>> 引入js(这里可以自己去官网下载jspdf https://parall.ax/products/jspdf) <script ...
ssm把图片保存到项目中_项目中的图片跨域问题解决方式
现象首先,在生产环境中,由于进行编辑图片时,将图片回显到ReactCrop组件中进行可裁剪编辑,然而回显时,需要将图片转化为base64的格式或者blob对象, 此时需要将图片次绘制成canvas进 ...
vue实现HTML转PDF (已解决清晰、页边距、图片跨域导出等问题)
最近有需求做简历打印的功能,就又花时间研究了一下html转图片导出,里面牵扯到多页pdf导出时的分页和页边距问题,清晰度问题以及图片跨域问题等.我们一个一个来解决. 一.先说HTML转PDF的实现方法 ...
canvas里阿里云服务器oss图片跨域处理
图片img标签默认是可以跨域的,但是canvas中不允许跨域,所以在使用html2canvas.js将html代码转图片时,html中如果存在跨域图片就会报错.需要后台在阿里云上配置图片允许跨域.前端 ...
html图片左侧留白,HTML+CSS入门如何解决图片跨域导致的截图空白
本篇教程介绍了HTML+CSS入门如何解决图片跨域导致的截图空白,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1. 后端支持:图片要是cdn上的地址,并且允许图片跨域 ...
vue吸管拾色器、利用canvas获取坐标点颜色、canvas获取坐标点颜色图片跨域、图片转base64、colorPicker
vue吸管拾色器.利用canvas获取坐标点颜色.canvas获取坐标点颜色图片跨域.图片转base64.colorPicker 1.需求:表格中主颜色和次颜色是需要从缩略图上吸取颜色,然后渲染色块, ...

cropper 图片跨域

img元素中的crossorigin属性

使用场景

crossorigin属性

cropper 图片跨域相关推荐

最新文章

热门文章