jQuery 图片剪裁插件初探之 Jcrop
主页:http://deepliquid.com/content/Jcrop.html
官方下载地址:http://deepliquid.com/content/Jcrop_Download.html
下载包中除了 CSS 文件夹和 js 文件夹外还提供了几款 demo:
1. non-image.html 不包含图像的任意 div 或 canvas 的剪裁方式:
2.styling.html
点击按钮改变样式:提供了 3 种可以选择的遮罩色、透明度和选区边框样式 jcrop-light ( bgcolor:#fff opacity:0.5 ) , jcrop-dark ( bgcolor:#000 opacity:0.4 ) , normal ( bgcolor:#000 opacity:0.6 )
3.tutorial1.html
Jcrop 的默认设置,只能图像上画裁剪框:
原图的 html 部分为:
<img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
此时在 js 中使用:
<script type="text/javascript">jQuery(function($){// How easy is this?? $('#target').Jcrop();});</script>
就可以显示默认的最简单的 demo 的效果。
4. tutorial2.html
基本事件处理事件: 使用 Jcrop 的 onchange 事件,实时更新显示左上、右下坐标值和选区宽高值,可以把这些值传递给后端程序进行处理
5.tutorial3.html
使用 Jcrop 的 onchange 事件,固定选区长宽比例并显示预览图,可以使用这种方法创建缩略图或者生成头像
预览图的显示机制和 imgAreaSelect 类似,见 line:42
function updatePreview(c){if (parseInt(c.w) > 0){var rx = xsize / c.w;var ry = ysize / c.h;$pimg.css({width: Math.round(rx * boundx) + 'px',height: Math.round(ry * boundy) + 'px',marginLeft: '-' + Math.round(rx * c.x) + 'px',marginTop: '-' + Math.round(ry * c.y) + 'px'});}};
参数 c 是选区,c.w 代表选区的宽,c.h 代表选区的高;xsize 和 ysize 分别是预览窗口的宽和高;缩放比为 rx 与 ry 分别等于预览窗口的宽和高除以选区的宽和高;boundx 是原图的宽,boundy 是原图的高,见 jquery_Jcrop.js line:328:
var boundx = $img.width(),boundy = $img.height(),
最后呈现在预览窗口中预览图的宽度等于缩放比乘以原图的宽高,这个处理和 imgAreaSelect 插件时一致的。
如果要改变选区的宽高比,只需在 demo html 中改变 line:91 #preview-pane .preview-container 的宽度和高度即改变预览窗口的宽度和高度,同时选区的宽高比也随着预览窗口的改变发生改变并和预览窗口宽高比一致。
图示预览图的宽度和高度为:
#preview-pane .preview-container {width: 250px;height: 170px;overflow: hidden; }
修改为:
#preview-pane .preview-container {width: 220px;height: 220px;overflow: hidden; }
如果需要不限制预览窗口的尺寸,预览图不发生缩放,和选区尺寸保持一致 ( 这种情况比较少 ),可以在 demo:tutorial1.html 中增加预览窗口的代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>Hello World | Jcrop Demo</title> 5 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 6 7 <script src="../js/jquery.min.js"></script> 8 <script src="../js/jquery.Jcrop.js"></script> 9 <script type="text/javascript"> 10 11 jQuery(function($){ 12 13 // How easy is this?? 14 $('#target').Jcrop({ 15 16 onChange:showCoords, 17 onSelect:showCoords 18 }); 19 }); 20 21 function showCoords(c){ 22 23 $('#preview-pane').css({"backgroundPosition":"-"+c.x+"px -"+c.y+"px","width":c.w,"height":c.h}); 24 }; 25 26 </script> 27 <link rel="stylesheet" href="demo_files/main.css" type="text/css" /> 28 <link rel="stylesheet" href="demo_files/demos.css" type="text/css" /> 29 <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" /> 30 <style> 31 #preview-pane{background:url(demo_files/sago.jpg)} 32 </style> 33 </head> 34 <body> 35 36 <img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" /> 37 <div id="preview-pane"></div> 38 39 </body> 40 </html>
View Code
如图:
6.tutorial4.html
使用 animateTo API 进行各种动画和过渡的选区变换、背景透明度和背景颜色的过渡转变,很炫
颜色过渡需要 jQuery Color Animations 插件的支持,否则颜色不会有过渡效果。
这个演示还需要使用 outerImage 选项定义另外的图像。
use experimental shader : 使用实现性的遮罩
7.tutorial5.html API Demo
翻译过来的界面( 来自:http://code.ciaoca.com/jquery/jcrop/demo/api.html ):
demo 文件夹中还提供了 crop.php,把选取的图片真正剪裁出来。
更多内容:官方文档
中文文档
转载于:https://www.cnblogs.com/dee0912/p/4053876.html
jQuery 图片剪裁插件初探之 Jcrop相关推荐
- html中剪切图片所用插件,简单功能强大的jQuery图片剪裁插件Image Cropper
插件描述:相信很多朋友都在大型的网站,如新浪微博.QQ微博上看到过头像裁图工具,感觉很高大尚吧,今天朋友们有福了,今天就来说一说一款这么高大尚的插件cropper,cropper是一款使用简单且功能强 ...
- php裁剪插件,简单功能强大的jQuery图片剪裁插件Image Cropper 中文api
图片剪裁插件Image Cropper使用方法 引入必要的js和css核心文件 构建html,可以将图片或canvas直接包裹到一个块级元素中 初始化插件,可以使用$.fn.cropper方法来初始化 ...
- jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...
- html图片自动剪裁,jQuery简单且功能强大的图片剪裁插件
cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. croppe ...
- 一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...
- jquery 图片裁剪 java_[Java教程]5 款最新的 jQuery 图片裁剪插件
[Java教程]5 款最新的 jQuery 图片裁剪插件 0 2015-05-18 16:00:20 这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁 ...
- 十个jQuery图片画廊插件推荐
2019独角兽企业重金招聘Python工程师标准>>> jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuer ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 精心挑选的23款美轮美奂的 jQuery 图片特效插件
jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...
最新文章
- 对Exchange 事件ID 9154 DSACCESS 返回 DS 通知出现的错误“0x80004005”的处理
- 丑憨批的Transformer笔记
- 亲手完成四大企业实战项目,挑战Python全栈高薪岗位!
- 360发布穿戴设备“儿童卫士”手环
- 使用复合设计模式扩展持久化的CURD,Select能力
- java 随机手机验证码_基于Java随机生成手机短信验证码的实例代码|chu
- 幻灯片:LINQ Inside, Part 1
- Eclipse·Maven·构建SpringMVC简单工程-2
- 春雷视频添加投屏功能解惑
- 小波变换matlab加密,混沌和小波变换的图像加密压缩算法
- python word转pdf图片格式_Python将Word转成PDF
- c语言模拟交通信号,C语言编写的交通信号灯
- 计算机通信原理基础知识总结
- eeplat中遇到日期先后校验问题的解决
- Java如何计算年龄
- java计算机毕业设计的洗衣店订单管理系统源码+数据库+系统+lw文档+mybatis+运行部署
- 全国计算机等级题库winrar,全国计算机等级考试试题和答案
- 低俗英语一百句----快速学习英语的一个好方法
- 简易方法制作GIF图(mp4转GIF)
- 计算机显示器窗口成灰色,解决win10电脑屏幕变成灰色的方法
热门文章
- 配置GitLab 用smtp发邮件 (gitlab-6.7.3)
- 【Caffe实践】 多目标输出探究
- Caffe实践】如何利用Caffe训练ImageNet分类网络
- [翻译][1.4.2]Flask-Admin入门介绍
- JavaScript强化教程——javascript性能优化
- qt5使用mysql
- Javascript网页摇一摇
- android获取string.xml的值(转)
- 五 Django 1.5.4 User Authentication 用户认证
- 解除svn控制下的文件夹的svn的控制