基于jQuery功能非常强大的图片裁剪插件
今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠标拖动。效果图如下:
来看看实现的代码,这里我们主要来看JavaScript代码
获取图片的Canvas画布:
function getSourceCanvas(image, data) {
var canvas = $('<canvas>')[0],
context = canvas.getContext('2d'),
width = data.naturalWidth,
height = data.naturalHeight,
rotate = data.rotate,
rotated = getRotatedSizes({
width: width,
height: height,
degree: rotate
}); if (rotate) {
canvas.width = rotated.width;
canvas.height = rotated.height;
context.save();
context.translate(rotated.width / 2, rotated.height / 2);
context.rotate(rotate * Math.PI / 180);
context.drawImage(image, -width / 2, -height / 2, width, height);
context.restore();
} else {
canvas.width = width;
canvas.height = height;
context.drawImage(image, 0, 0, width, height);
} return canvas;
}
加载图片:
prototype.load = function (url) {
var options = this.options,
$this = this.$element,
crossOrigin,
bustCacheUrl,
buildEvent,
$clone; if (!url) {
if ($this.is('img')) {
if (!$this.attr('src')) {
return;
} url = $this.prop('src');
} else if ($this.is('canvas') && SUPPORT_CANVAS) {
url = $this[0].toDataURL();
}
} if (!url) {
return;
} buildEvent = $.Event(EVENT_BUILD);
$this.one(EVENT_BUILD, options.build).trigger(buildEvent); // Only trigger once if (buildEvent.isDefaultPrevented()) {
return;
} if (options.checkImageOrigin && isCrossOriginURL(url)) {
crossOrigin = 'anonymous'; if (!$this.prop('crossOrigin')) { // Only when there was not a "crossOrigin" property
bustCacheUrl = addTimestamp(url); // Bust cache (#148)
}
} 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({
src: bustCacheUrl || url,
crossOrigin: crossOrigin
}); // Hide and insert into the document
$clone.addClass(CLASS_HIDE).insertAfter($this);
};
预览截图:
prototype.initPreview = function () {
var url = this.url; this.$preview = $(this.options.preview);
this.$viewBox.html('<img src="' + url + '">'); // Override img element styles
// Add `display:block` to avoid margin top issue (Occur only when margin-top <= -height)
this.$preview.each(function () {
var $this = $(this); $this.data(CROPPER_PREVIEW, {
width: $this.width(),
height: $this.height(),
original: $this.html()
}).html('<img src="' + url + '" style="display:block;width:100%;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;image-orientation: 0deg!important">');
});
};
via:http://www.w2bc.com/Article/37726
基于jQuery功能非常强大的图片裁剪插件的更多相关文章
- js插件---强大的图片裁剪Cropper
js插件---强大的图片裁剪Cropper 一.总结 一句话总结:官网或者github里面的文档或者demo才是真的详细 使用的话找到图片裁剪后的base64数据,然后这个数据可下载可传递到服务器 1 ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- Croppic – 免费开源的 jQuery 图片裁剪插件
Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData 对 ...
- 5 款最新的 jQuery 图片裁剪插件
这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁剪功能. Cropit Cropit 是一个 jQuery 插件,支持图像裁剪和缩放功能.Cropit ...
- jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...
- 基于 jQuery 实现的精致作品集图片导航效果
今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...
- 基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="slid ...
- 开源JS图片裁剪插件
开源JS图片裁剪插件 一.总结 一句话总结: 要用点赞最高的插件,这样适用性最好,效果最好,出问题的概率也最低,这里电脑端和手机端都可以用的建议用 cropper.js 二.5款好用的开源JS图片裁剪 ...
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
随机推荐
- 【Struts2】Struts2框架的搭建
1,Struts2简介 struts1和struts2都是由Apache组织发布的,但是比较有趣的是struts2和struts1并没有“血缘关系”.在Apache发布struts1之后,当时是还是非 ...
- kafka中处理超大消息的一些处理
Kafka设计的初衷是迅速处理短小的消息,一般10K大小的消息吞吐性能最好(可参见LinkedIn的kafka性能测试).但有时候,我们需要处理更大的消息,比如XML文档或JSON内容,一个消息 ...
- Oracle 12C -- 删除audit policy
删除之前,必须将policy disable掉:然后再删除 SQL> noaudit policy audit_sysprvi_po01; SQL> drop audit policy a ...
- Oracle 12C -- 删除PDB
删除PDB SQL> select con_id,pdb_name,status from cdb_pdbs; CON_ID PDB_NAME STATUS ---------- ------- ...
- vue 关于deep watch / computed 监听不到 vuex state 对象变化的的问题
简而言之,如果vuex state 中是一个对象 {},那么监听就会有问题.先给出解决方案: // 超简易拷贝(如果是深拷贝还多此一举把get/set拷贝进去了,所以用简易拷贝即可) let __VA ...
- Ubuntu下设置开机后自动运行命令(转)
从道理上来讲,Ubuntu开机应该是能够设置执行一些脚本的,事实上确实如此,网上给出了很多解决的方案,基本上是分为两种, 第一种是编辑/etc/下的rc.local脚本, 然后把对应的需要执行的脚本写 ...
- JPA之@GeneratedValue注解(转)
JPA的@GeneratedValue注解,在JPA中,@GeneratedValue注解存在的意义主要就是为一个实体生成一个唯一标识的主键(JPA要求每一个实体Entity,必须有且只有一个主键), ...
- 微信小程序 自定义单选复选按钮组的实现(用于实现购物车产品列表功能)
(一)单选按钮组 模型图如下: index.js Page({ data: { parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ i ...
- Mysql 导入CSV数据 语句 导入时出现乱码的解决方案
1. 登陆mysql 2. use testdb 3. 执行导入语句 LOAD DATA LOCAL INFILE 'd://exportedtest2.csv' INTO TABLE usertab ...
- RSA算法 JS加密 JAVA解密
有这样一个需求,前端登录的usernamepassword,password必需加密.但不可使用MD5,由于后台要检測password的复杂度,那么在保证安全的前提下将password传到后台呢,答案 ...