• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
掩耳盗心
博客园    首页    新随笔    联系   管理    订阅  订阅

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();
                };
            }
    }});
View Code

在图片加载后初始化 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
});

  

 

posted @ 2014-10-28 15:34  剑在心中  阅读(983)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3