上传图片截图预览控件不显示cropper.js 跨域问题
2017-05-22 14:06
1396 查看
上传图片到图片服务器,因为域名不同,多以会有跨域问题。
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可以这样:
注释掉那行crossOrigin就好了。
对于高版本(我用的Cropper v2.3.4)因为代码调整了,找到 function getCrossOrigin(crossOrigin),将里面返回跨域代码的那行注释掉,返回空字符串就好了。
我是这样改的:
可以显示出来了
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 ''; }
可以显示出来了
相关文章推荐
- js控制图片上传预览,使用三方插件+名称显示和控件非display:none隐藏
- js实现图片上传前的预览,实现完美兼容Firefox3,IE6,IE7,IE8和IE9的显示问题
- js兼容火狐显示上传图片预览效果的方法
- JS+file控件实现图片的上传和预览
- 上传图片预览功能的IE浏览器兼容性问题的实现:JS+JQuery+CSS完整版
- JS上传图片且在线预览,修改浏览器兼容性问题
- JS实现用户上传图片并预览(图片fakepath问题)
- js上传照片,预览,压缩后base64编码发送后台,及将后台返回的base64图片显示到HTML
- 图片上传预览js控件开发总结
- JS预览上传图片发现的问题
- Asp.net中FileUpload控件实现图片上传并带预览显示
- FileUpload控件实现单按钮图片自动上传并带预览显示
- js兼容火狐显示上传图片预览效果的方法
- js获取file控件的完整路径(上传图片预览)
- 今天再做上传图片时候遇到了一个JS 图片预览问题
- bootstrap上传插件(fileinput.js)预览显示删除图标问题
- 关于ajaxfileupload.js一些问题和上传图片就立即显示图片功能
- 今天再做上传图片时候遇到了一个JS 图片预览问题
- js 上传图片预览问题
- js兼容火狐显示上传图片预览效果的方法(读取字节)