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

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 '';
}

可以显示出来了

上传图片截图预览控件不显示cropper.js 跨域问题的更多相关文章

  1. Winform中在FastReport的PreviewControl预览控件中对report控件模板中控件值进行修改

    场景 FastReport安装包下载.安装.去除使用限制以及工具箱中添加控件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  2. 使用pdf.js实现前端页面预览pdf文档,解决了跨域请求

    pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责核心解析 官网地址:http://mozilla.github.io/pdf.js/ 下 ...

  3. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  4. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  5. “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型,或该类型未注册为安全类型。”

    自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...

  6. 关于<textArea>控件下显示不出其它控件

    今天在写页面控件时发现我添加一个<textarea>后,在其下方的控件都显示不出来了,后来发现我忘写结束标记</textarea>了 以后该写结束标记还要写啊!

  7. iOS开发小技巧--判断控件是否显示在当前窗口

    一.判断控件是否显示在当前窗口,需要同时满足一下条件: 控件的Hidden = NO; 控件的Alpha >= 0.01; self.window = keyWindow; 主窗口的bounds ...

  8. 解决TalbleView头部或底部子控件不显示问题

    在自定义cell头部控件UITableViewHeaderFooterView(和自定义cell的方法几乎一样)时,出现了头部控件子控件不显示的问题. 注意和自定义cell的区别. .h文件 #imp ...

  9. QlikView TEXT控件固定显示图片

    QlikView 的Text控件不仅可以用来展示文本也可以用来展示图片. 数据表 2个列,一个是 关联字段(Country),另外一个保存图片物理路径. TEXT控件固定显示图片 ,编辑控件表达式 = ...

随机推荐

  1. jenkins+docker 持续构建非docker in docker

    工欲善其事必先利其器,为了解脱程序员的,我们程序员本身发明了很多好用的工具,通过各种工具的组合来达到我们想要的结果 本文采用jenkins docker svn maven作为相关工具,项目sprin ...

  2. js多个元素随机且不重叠分布在页面中

    最近,公司要做一个类似挖矿的项目,大概其是当用户登录进入首页后,如果用户有已经生成的原力值,则在其点击原力值后可以类似蚂蚁森林那样收集原力值,当用户将所有的原力值收集完毕后开始提醒用户新的原力值正在生 ...

  3. Centos 7 Linux系统修改网卡名称为ethx

    一.Centos7 系统安装完成后更改网卡名称方法 1.查看Centos7系统默认的网卡配置(eno16777736) [root@server ~]# ifconfig eno16777736: f ...

  4. python接口自动化(二十六)--批量执行用例 discover(详解)

    简介 我们在写用例的时候,单个脚本的用例好执行,那么多个脚本的时候,如何批量执行呢?这时候就需要用到 unittest 里面的 discover 方法来加载用例了.加载用例后,用 unittest 里 ...

  5. Promise (1) 如何使用Promise

    Promise 也是面试高频问题, 今天我们来看看Promise是什么, 能做什么, 怎么用, 下一期我们自己来模拟一个myPromise 1  Promise 是什么 我们要学会自己给自己提问, 才 ...

  6. 聊聊真实的 Android TV 开发技术栈

    智能电视越来越普及了,华为说四月发布智能电视跳票了,一加也说今后要布局智能电视,在智能电视方向,小米已经算是先驱了.但是还有不少开发把智能电视简单的理解成手机屏幕的放大,其实这两者并不一样. 一.序 ...

  7. 这可能是史上最好的 Java8 新特性 Stream 流教程

    本文翻译自 https://winterbe.com/posts/2014/07/31/java8-stream-tutorial-examples/ 作者: @Winterbe 欢迎关注个人微信公众 ...

  8. 《前端之路》 之 前端 安全 XSS 原理以及防御手段

    什么是 XSS 一.XSS 什么是 XSS XSS,即 Cross Site Script , 翻译过来就是 跨站脚本攻击:为了和 css 有所区分,因而在安全领域被称为 XSS. 什么是 XSS 攻 ...

  9. Javaoop 遇到的问题

    一.java 异常的捕获与处理 (免责声明:本博客里所引用的他人博客链接,只用作我个人的学习,同时非常感谢这些作者!) 1.  https://blog.csdn.net/wei_zhi/articl ...

  10. Shiro详解

    Shiro Shiro集成Spring 加入Spring和Shiro的jar包 配置Spring及SpringMVC 参照:官方给出的案例shiro\samples\spring Shiro集成Web ...