Jcrop 做图片剪裁 在IE中无法显示问题解决办法

我遇到的Jcrop做剪裁无法显示的问题 是在IE8下发生的(在 firfox he chrome 中是显示正常的)

解决办法 是在一个图片加载完成后在 初始化 Jcrop;
1.预加载图片的方法

var App=(function(){
preLoadImages:function(images,callback){
         var newimages=[], loadedimages=0;
            var images=(typeof images!="object")? [images] : images;
            function imageloadpost(){
                loadedimages++;
                if (loadedimages==images.length){
                    callback(newimages);
                }
            }
            for (var i=0; i<images.length; i++){
                newimages[i]=new Image();
                newimages[i].src=images[i];
                newimages[i].onload=function(){
                    imageloadpost();
                };
                newimages[i].onerror=function(){
                imageloadpost();
                };
            }
    }});

在图片加载后初始化 Jcrop

App.preLoadImages([url],function(){
			$jscopImg.Jcrop({
				  aspectRatio:1,//宽高比,为1则选框为正方形
			      bgFade:true,
			      allowSelect:false,
			      cornerHandles:false,
			      sideHandles:false,
			      allowResize:true,
			      bgOpacity:0.5,//图片透明度
			      setSelect: [0,0,179,179],//x,y,x2,y2
			      onChange: showCoords,
			      onSelect: showCoords,
			      minSize:[60,60],//选框最小尺寸
			      maxSize:[w,h]//选框最大尺寸
			    },function(){
			      jcrop_api = this;
			});
                      //do something
});

  

时间: 2024-08-29 11:16:36

Jcrop 做图片剪裁 在IE中无法显示问题解决办法的相关文章

关于hexo markdown添加的图片在github page中无法显示的问题

title: 关于hexo markdown添加的图片在github page中无法显示的问题 date: 2018-03-31 00:21:18 categories: methods tags: hexo markdown 云端 试了很多网站的图片,发现主要是CSDN和博客园的图片无法显示. 推荐用Bing或者Google搜索外网图片添加. 本地 在source目录下新建images目录,将要添加的图片存放在这个目录下,md引用时使用/images/... 原文地址:https://www.

电脑装的是office2013,右键新建却是2007,或者右键新建菜单中没有excel2013问题解决办法。

我的office出现了两个问题,因为工作比较忙,也没有着急解决,今天实在受不了了,花费一下午才找到解决方法. 原来万恶之源都是可恶的wps,以后千万不安装kingsoft了. 第一个问题:excel打开的文件.xls的格式与扩展名不一致.第二个问题:电脑装的是office2013,右键新建却是2007. 因为网上的资源好多都不能很好的解决,所以现在做下记录,方便更多的人. 两个方法本质是一样的,第一种: 1,点击系统左下角的“开始”---“所有程序”---“附件”---“运行” 2,输入“reg

DBeaver 客户端中时间显示问题解决

最近工作使用了一段时间的macOS,换了新的数据库客户端 DBeaver,无意中发现客户端显示时间不正确.时间保存之后显示比实际时间多13个小时整.可以判断是时区没有配置正确.无意中发现是DBeaver的问题,最后发现了需要更改的地方. 解决方法1: 参照jdbc驱动的url写法,在url中加入一些数据库链接配置:找到了这个配置. (主要是不熟悉,英文也不太好,不想看文档) 解决方法2: 指明数据库的时区,time_zone不使用system,改为东八区:参照ISO日期格式标准,浏览器到服务器到

织梦上传本地视频后 文件管理器中不显示解决办法

以上传mp4文件为例 首先修改后台设置后才可以上传mp4文件 系统基本参数 - 附件设置 - 允许的多媒体文件类型,添加mp4 然后修改代码使文件管理器显示mp4文件 include/dialog/select_media.php 找到 else if(preg_match("#\.(swf|fly|fla|flv)#i", $file)){ 改为 else if(preg_match("#\.(swf|fly|fla|flv|mp4)#i", $file)){ 原

android编程常见问题-程序在模拟器中不显示

新手编程常见问题: 问题表现:程序运行成功,但是在模拟器中不显示 解决办法:检查项目版本和模拟器版本是否匹配或兼容,如果不匹配,选择和模拟器版本一致 项目版本:右键-Properties-android-target name 和API ,查看版本(图1) 模拟器版本:打开AVD Manager,查看当前使用版本,或者通过Device  查看(图2)           图1           图2

D语言中做图片转换

在D语言中可以使用imageformats库做图片转换. 该库可以从https://github.com/lgvz/imageformats 下载. 下载好后,装文件放入到自己的工程中就可以使用了.      转换函数: read_image_from_mem(imgData, ColFmt.RGBA); 转出来的数据为IFImage结构,以上面指定的格式存储在内存中. /// Image struct IFImage { int w, h; ColFmt c; ubyte[] pixels;

使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码

?? 1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那些js可以参考JCrop案例: 3.编写的html代码如下: <div id="light" class="white_content"> <div class="vatitlee"> 封面截取 <div class=&

图片剪裁控件——ClipImageView

这段时间在做自己的项目时,须要使用到图片剪裁功能,当时大概的思考了一些需求.想到了比較简单的实现方法.因此就抽了点时间做了这个图片剪裁控件--ClipImageView 这里先贴上ClipImageView的代码: package com.example.clipimage; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import a

struts2+jsp+jquery+Jcrop实现图片裁剪并上传

<1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发送数据给Action,在服务器端使用 Java API 对大图进行裁剪. <4> 保存大图裁剪好的头像到指定目录,完成业务. 下面一步一步做: 第一步:使用html标签上传需要裁剪的大图. 这一步说白了也就是使用Struts2自带的FileUpload功能,把图片进行上传具体代码如下: html页