上传图片截图预览控件不显示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 ‘‘;
  }

可以显示出来了

时间: 2024-10-03 22:30:09

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

js判断视频预览控件

原因分析:无法判断浏览器是否已经安装控件的原因是PlaybackOCX类没有直接提供一个判断是否安装控件的方法. 解决思路:用PlaybackOCX控制视频播放的步骤为1.初始化PlaybackOCX对象 2.然后调用PlaybackOCX对象的setPlayback方法,如果已经安装浏览器控件则调用成功返回0,否则调用失败返回1.因此如果调用setPlayback方法返回1时,说明没有安装浏览器控件. 代码展示:   function isBrowserIE() {   var appName

RM报表预览窗口和预览控件直接的链接

procedure TRMPreviewForm.Execute(aDoc: Pointer); begin FDoc := aDoc; FViewer.FPrepareReportFlag := False; FViewer.ShowToolbar := True; FViewer.Connect(aDoc); if (FViewer.Dock971 <> nil) and (FViewer.FReport <> nil) then FViewer.Dock971.ShowHin

java uploadify上传图片并预览

前一篇文章可以看到对jquery uploadify的属性的讲解,这里给出具体的java代码实现,代码基于servlet,实现了上传图片并预览的效果,不多说,上代码 index.jsp <%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W

2016/4/19 ①单个文件上传 ②上传图片后 预览图片

1,f1.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 作业:在网上找上传图片预览的代码 上传服务器 再预览--> <form action="f1chuli.php&q

js实现上传图片本地预览功能

js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * @param {Object} previewObj 上传图片的预览id元素  fresh-send-preview-img     * @param {Object} localImg 预览图片的父层id元素  fresh-send-preview-imgvideo     */    fs.setIma

Ajax 实现上传图片即时预览功能

本文为原创,转载请注明:http://www.pm-road.com/index.php/2014/07/31/50 很多网站在上传头像或照片的时候,都会有一个预览功能,结合自身体验将该功能实现一下:要求:图片保存到数据库点击查看实现ajax上传图片即时预览另一种方法(简单方法) 之前,我在做项目的时候,有一个功能就是要求上传的图片要即时显示,很多网站都会有这样的案例,其中的代码逻辑大多为把图片传到服务器上之后,返回图片的 物理路径,不过,我们当时使用的框架为ExtJS 4.1,而且因为涉及一些

终于懂了:FWinControls子控件的显示是由Windows来管理,而不是由Delphi来管理

在研究TCustomControl的显示过程中,怎么样都找不到刷新FWinControls并重新显示的代码: procedure TWinControl.PaintHandler(var Message: TWMPaint); var I, Clip, SaveIndex: Integer; DC: HDC; PS: TPaintStruct; begin DC := Message.DC; if DC = 0 then DC := BeginPaint(Handle, PS); try if

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

在自定义cell头部控件UITableViewHeaderFooterView(和自定义cell的方法几乎一样)时,出现了头部控件子控件不显示的问题. 注意和自定义cell的区别. .h文件 1 #import <UIKit/UIKit.h> 2 #import "CHModleGroup.h" 3 @interface HeaderView : UITableViewHeaderFooterView 4 @property (nonatomic, weak) UILabe

iOS UI控件没有显示时的调试技巧

1.遇到UI控件没有显示的问题,可以给这个控件设置背景色 假设这个控件是UIBUtton 如果背景色能显示,那问题就出在image和title值为空 如果背景色不能显示,重写控件的description方法,把控件的frame打印出来分析 2.以下是打印UIView的frame的分类 #import <UIKit/UIKit.h> @interface UIView (Log) @end 1 #import "UIView+Log.h" 2 3 @implementatio