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
});
Jcrop 做图片剪裁 在IE中无法显示问题解决办法的更多相关文章
- 关于hexo markdown添加的图片在github page中无法显示的问题
title: 关于hexo markdown添加的图片在github page中无法显示的问题 date: 2018-03-31 00:21:18 categories: methods tags: ...
- 使用HTML5的canvas做图片剪裁
前言 图片裁剪上传,不仅是一个很贴合用户体验的功能,还能够统一特定图片尺寸,优化网站排版,一箭双雕. 需求就是那么简单,在浏览器里裁剪图片并上传到服务器. 我第一个想到的方法就是,将图片和裁剪参数(x ...
- 电脑装的是office2013,右键新建却是2007,或者右键新建菜单中没有excel2013问题解决办法。
我的office出现了两个问题,因为工作比较忙,也没有着急解决,今天实在受不了了,花费一下午才找到解决方法. 原来万恶之源都是可恶的wps,以后千万不安装kingsoft了. 第一个问题:excel打 ...
- DBeaver 客户端中时间显示问题解决
最近工作使用了一段时间的macOS,换了新的数据库客户端 DBeaver,无意中发现客户端显示时间不正确.时间保存之后显示比实际时间多13个小时整.可以判断是时区没有配置正确.无意中发现是DBeave ...
- vue项目build打包后图片路径不对导致图片空白不显示问题解决方法
1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图: ...
- elasticsearch安装过程中的license问题解决办法
1.git clone git://github.com/mobz/elasticsearch-head.git 2.cd elasticsearch-head 3.npm install 出现下来问 ...
- pydev离线安装及安装后eclipse中不显示解决办法
eclipse插件安装方法(离线安装)pydev进入eclipse目录1.创建links目录2.复制压缩包到目录前解压3.在links目录下新建pydev.link文件(记事本修改后缀名即可)4.py ...
- android编程常见问题-程序在模拟器中不显示
新手编程常见问题: 问题表现:程序运行成功,但是在模拟器中不显示 解决办法:检查项目版本和模拟器版本是否匹配或兼容,如果不匹配,选择和模拟器版本一致 项目版本:右键-Properties-androi ...
- struts2+jsp+jquery+Jcrop实现图片裁剪并上传
<1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发 ...
随机推荐
- Android UI学习 - GridView和ImageView的使用
GridView: A view that shows items in two-dimensional scrolling grid. The items in the grid come from ...
- Boost.Asio c++ 网络编程翻译(20)
异步服务端 这个图表是相当复杂的:从Boost.Asio出来你能够看到4个箭头指向on_accept.on_read,on_write和on_check_ping. 着也就意味着你永远不知道哪个异步调 ...
- agentzh --春哥--调试专家
https://github.com/agentzh/perl-systemtap-toolkit https://github.com/openresty http://openresty.org/ ...
- 移动前端之 zepto
移动前端之 zepto http://qtown.corp.qunar.com/media/video/detail?id=1084&type=1&title=%E5%86%AF%E5 ...
- typeerror $.ajax is not a function
在web开发中使用jQuery进行前端开发遇到这么个问题,纠结了很久终于解决了,下面说一下解决方法. 大家可以参照下面几种排查的方法. 1.首先检查是否引用jQuery的库. 2.页面如果使用的ifr ...
- HTML5移动开发中的input输入框类型
HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单 本文中,实测手机为肾4S与米4 数字类型num ...
- 前端自动化构建工具 Gulp 使用
一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...
- Win7设置承载网络 分类: 网络 2014-10-30 09:08 105人阅读 评论(0) 收藏
Win7设置承载网络 (1)最重要的第一步,要知道自己的网卡是否支持承载网络,如果不支持就悲剧地一票否决了,支持的话才能开始以后各步骤的设置. netsh wlan show drivers (2)设 ...
- Adb connect监听指定的主机和端口/Adb监听Visual Studio Emulator for Android模拟器
语法: adb connect <host>[:<port>] 使用实例: adb connect //如果连接成功则返回 connected to 说明 在使用Visual ...
- [o] duplicate column name: _id 问题解决
Android下使用SQLite数据库,报错:duplicate column name: _id 数据库文件下有两列数据的名称一样,原因是定义数据类型时有重复,如,我的定义: //复制上一行增加TY ...