jQuery 图像裁剪插件Jcrop

Jcrop简介

Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:PHP)可以快速的实现图片裁剪的功能。

Jcrop是一款免费的软件,采用MIT License发布。

注:本文主要围绕 Jcrop v2.0.0-RC1 版本进行介绍,一些参数或API在 Jcrop v0.9.12 及之前版本中可能并不支持。

版本

Jcrop v0.9.12 支持画一个框截取图片。

Jcrop v2.0.0-RC1 相比于老版本,新增了支持画多框的功能。

下载地址:

http://jcrop.org/download

下载对应版本的压缩包。

压缩包中有demo目录,其中有多种应用场景的范例,可以参考。

使用方法

载入CSS文件

<link rel="stylesheet" href="Jcrop.css">

载入Javascript文件

<script src="jquery.js"></script> 
<script src="Jcrop.js"></script>

给IMG标签加上ID

<img id="element_id" src="pic.jpg">

调用Jcrop

$('#element_id').Jcrop();

参数说明

下表为Jcrop对象的主要参数:

API

下表为Jcrop对象的主要API:

名称

说明

init

初始化Jcrop对象

destroy

销毁Jcrop对象

applySizeConstraints

应用大小限制条件

initComponent

初始化指定子组件

setOptions

设置选项参数 例: cb.setOptions({ allowSelect: true, multi: false });

applyFilters

应用过滤器

getDefaultFilters

获取默认过滤器

setSelection

设置选中框

getSelection

获取选中框

newSelection

创建一个新的选中框

hasSelection

判断是否有选中框

removeSelection

移除选中框

addFilter

添加过滤器

removeFilter

移除过滤器

blur

不聚焦选中框

focus

聚焦选中框

initEvents

初始化事件

maxSelect

设置选中框的最大宽度和高度

refresh

刷新所有框

blurAll

所有框都取消聚焦

scale

框按照比例调整

unscale

scale的反向操作

deleteSelection

删除选中框,并聚焦在最早创建的框上

animateTo

以动画的形式生成一个新的框

setSelect

设置框

getContainerSize

获取容器的尺寸

resizeContainer

调整容器的宽度和高度

setImage

设置Jcrop绑定的图像,可以用这个函数更换图片

update

更新框

范例代码解读

这部分内容是对于Jcrop2中的demo核心代码进行注释讲解。详细内容请参考对于demo的注释内容

注:以下所示的代码都是在 Jcrop v2.0.0-RC1 版本的demo代码基础上提炼了核心代码。替换原目录下的代码就可以直接运行。

basic.html

这个demo演示了最基本的功能。可以在图片上拖拽、拉伸框并实时显示坐标。

box-sizing.html 代码与 basic.html 基本相同,只是增加了设置框的大小,所以合并在一处讲解。

<!DOCTYPE html>
<html lang="en">
 <head>
 <script src="../js/jquery.min.js"></script>
 <script src="../js/Jcrop.js"></script>
 <script type="text/javascript">
      jQuery(function($){
 var d = document, ge = 'getElementById';
 
 // cropmove事件是指拖动、拖拽框的动作
 // 本函数的作用是每次对于框的变化,都记录其坐标变化,并记录下来
        $('#interface').on('cropmove',function(e,s,c){
          d[ge]('crop-x').value = c.x;
          d[ge]('crop-y').value = c.y;
          d[ge]('crop-w').value = c.w;
          d[ge]('crop-h').value = c.h;
        });
 
 // cropend事件是指拖动、拖拽框的动作结束
 // 当拖拽或拉伸框的动作结束,松开鼠标时,弹出提示框显示最终坐标
        $('#interface').on('cropend',function(e,s,c){
          d[ge]('crop-x').value = c.x;
          d[ge]('crop-y').value = c.y;
          d[ge]('crop-w').value = c.w;
          d[ge]('crop-h').value = c.h;
          alert("x : " + parseInt(c.x) + ", y : " + parseInt(c.y) + ", w : " + parseInt(c.w) + ", h : " + parseInt(c.h));
        });
 
 // Most basic attachment example
        $('#target').Jcrop({
          boxWidth: 750,    // 设置框的最大宽度
          setSelect: [ 175, 100, 400, 300 ]
        });
 
        $('#text-inputs').on('change','input',function(e){
          $('#target').Jcrop('api').animateTo([
            parseInt(d[ge]('crop-x').value),
            parseInt(d[ge]('crop-y').value),
            parseInt(d[ge]('crop-w').value),
            parseInt(d[ge]('crop-h').value)
          ]);
        });
 
      });
 
 </script>
 <link rel="stylesheet" href="demo_files/main.css">
 <link rel="stylesheet" href="demo_files/demos.css">
 <link rel="stylesheet" href="../css/Jcrop.css">
 <style>
      #text-inputs { margin: 10px 8px 0; }
      .input-group { margin-right: 1.5em; }
      .nav-box { width: 750px; padding: 0 !important; margin: 4px 0; background-color: #f8f8f7; }
 
 </style>
 </head>
 <body>
 <div class="container">
 <div class="row">
 <div class="span12">
 <div class="jc-demo-box">
 <div id="interface" class="page-interface"><img src="http://jcrop-cdn.tapmodo.com/assets/images/sierra2-750.jpg" id="target"></div>
 <div class="nav-box">
 <form onsubmit="return false;" id="text-inputs"><span class="input-group"><b>X</b>
 <input type="text" name="cx" id="crop-x" class="span1"></span><span class="input-group"><b>Y</b>
 <input type="text" name="cy" id="crop-y" class="span1"></span><span class="input-group"><b>W</b>
 <input type="text" name="cw" id="crop-w" class="span1"></span><span class="input-group"><b>H</b>
 <input type="text" name="ch" id="crop-h" class="span1"></span>
 </form>
 </div>
 <div class="clearfix"></div>
 </div>
 </div>
 </div>
 </div>
 </body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

制作Gmail式按钮

这种按钮设计最大的特点,就是完全不使用背景图片,是纯粹的HTML+CSS。同时,它也不使用任何表单元素,目的是在不同浏览器下,争取视觉效果的最大统一。

672
来自专栏tkokof 的技术,小趣及杂念

关于Unity ParticleSystem的一些"冷"知识

  目前的游戏开发中,粒子系统的使用想必是标配了,Unity自然也提供了相应的解决方案:ParticleSystem,网上对ParticleSystem的介绍也...

481
来自专栏进击的君君的前端之路

HTML知识点整理

1134
来自专栏向治洪

React Native的Navigator详解

前言 之前,通过官方文档,我们对Navigator简介。 在React Native开发中,官方推荐使用Navigator作为导航指示器,在早期的版本中io...

18110
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

从navigator到react-navigation进阶教程

1843
来自专栏向治洪

React Native的Navigator详解

前言 之前,通过官方文档,我们对Navigator简介。 在React Native开发中,官方推荐使用Navigator作为导航指示器,在早期的版本中ios/...

17310
来自专栏柠檬先生

jquery mobile 移动web(3)

可折叠功能块。   div 元素的 data-role 属性设置为 collapsible   代码如下:     <div data-role="...

18710
来自专栏跟着阿笨一起玩NET

c# 模拟window 操作鼠标|winapi

适合场景:LinkButton如果想要弹出右键菜单的时候,可以在Click事件中通过API模拟鼠标右击事件。

351
来自专栏Google Dart

Flutter 构建完整应用手册-导航器 顶

大多数应用程序包含几个用于显示不同类型信息的屏幕 例如,我们可能有一个显示产品的屏幕。 然后,我们的用户可以在新屏幕上点击产品以获取更多信息。

581
来自专栏Bug生活2048

微信小程序版博客——列表页相关问题汇总

首先是分页加载列表,从网上例子和文档来看有两种实现方式,一种是根据Page()上的 onReachBottom属性:页面上拉触底事件的处理函数,另一种就是通过s...

852

扫码关注云+社区