上传图片截图预览控件不显示cropper.js 跨域问题

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

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里面跨域属性，因为默认情况下图片跨域也是可以显示的。

对于低版本的cropper.js可以这样：

    this.$clone = $clone = $('<img>');
$clone.one('load', $.proxy(function () {
var naturalWidth = $clone.prop('naturalWidth') || $clone.width(),
naturalHeight = $clone.prop('naturalHeight') || $clone.height();
this.image = {
naturalWidth: naturalWidth,
naturalHeight: naturalHeight,
aspectRatio: naturalWidth / naturalHeight,
rotate: 0
};
this.url = url;
this.ready = true;
this.build();
}, this)).one('error', function () {
$clone.remove();
}).attr({
//      crossOrigin: crossOrigin, // "crossOrigin" must before "src" (#271)
src: bustCacheUrl || url
});

注释掉那行crossOrigin就好了。

对于高版本（我用的Cropper v2.3.4）因为代码调整了，找到 function getCrossOrigin(crossOrigin)，将里面返回跨域代码的那行注释掉，返回空字符串就好了。

我是这样改的：

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

可以显示出来了

更多专业前端知识，请上【猿2048】www.mk2048.com

上传图片截图预览控件不显示cropper.js 跨域问题相关推荐

Winform中在FastReport的PreviewControl预览控件中对report控件模板中控件值进行修改
场景 FastReport安装包下载.安装.去除使用限制以及工具箱中添加控件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
linux qt 打印预览控件,Qt实现保存、浏览、预览、打印功能的示例代码
Qt提供了以文本.图片.HTML等方式来实现对文档的操作,主要用到了QPrinter类和QPainter类,用到了QFileDialog文件窗口.QPrintPreviewDialog预览窗口类和QP ...
CameraView Android 相机预览控件
Github地址:https://github.com/google/cameraview 该控件为Google开源,非官方,只为了开发人员轻松集成Camera功能. 混淆: 发布release版本时 ...
安装多可预览控件后，不能正常预览和修改该怎么办？
安装多可控件后,用户A在预览或者在线修改Office文件时,如果系统提示错误情况,如下图: 那么通常会有以下几种可能原因及对策.请逐条自检,找到相应的解决办法. 一.原因:用户A的电脑没有安装正确的M ...
[Dxperience.8.*]报表预览控件PrintControl设置
整理的对PrintControl进行设置的代码 using System; using System.Collections.Generic; using System.ComponentModel; ...
本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
JavaScript上传图片及时预览
JavaScript上传图片及时预览 /*******************************正面图片上传预览开始****************************/ f ...
javascript --- [FormData的使用] 文件上传进度条展示文件上传图片即使预览
1. 准备工作因为要发送Ajax请求,而Ajax技术的运行需要网站环境,因此其中一个解决方案是,将页面作为网站的静态资源暴露出来,然后通过浏览器进行访问. 1.1 静态资源使用express将pu ...
jquery上传图片本地预览插件V1.2
v1.2 1.修复jquery版本高于1.9,插件报错BUG. 2.提供未压缩代码. 插件支持IE全系列谷歌火狐等浏览器注意:不支持safari 插件使用说明: 1.必须引用jquery ...

上传图片截图预览控件不显示cropper.js 跨域问题

上传图片截图预览控件不显示cropper.js 跨域问题相关推荐

最新文章

热门文章