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 条评论
登录 后参与评论

相关文章

来自专栏Windows Community

Extensions in UWP Community Toolkit - Overview

概述 UWP Community Toolkit  中有一个 Extensions 的集合,它们可以帮助开发者实现很多基础功能,省去自己造轮子的过程,本篇我们先...

35212
来自专栏刘望舒

React Native组件(二)View组件解析

前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件。View组件是最基本的组件,也是首先要掌握的组件,这一篇我们来学习View组件。 1.概述...

2186
来自专栏腾讯云商业智能分析团队的专栏

图表组件常见设置

图表组件是 BI 中最常用到的组件,能直观地反应出数据特征。在分析中为了让图表显示更好的效果,少不了对图表进行设置。接下来,简单介绍一下图表组件的常见设置。

1271
来自专栏Porschev[钟慰]的专栏

解决文本框在updatepanel中得到焦点,输入法不能切换到中文的问题

今天看人提问才发现TextBox放在updatepanel中,当点击Button时,在Button的click事件中得到焦点。。。 本来应该用TextBox1....

1826
来自专栏hightopo

原 快速创建 HTML5 Canvas 电

1472
来自专栏程序员的知识天地

前端字体截取技术,做炫酷网站再也不用怕中文字体数据量大啦!【实战】

众所周知,相对于英文字体,中文字体天生是“庞然大物”。英文字体两三百KB已经很大了,而中文字体几MB十几MB都算小的。一方面,中文字体包含的字形数量极多,动辄数...

1482
来自专栏熊二哥

Bootstrap快速入门

Bootstrap学习有两个重点,一个是概念的理解,理解bootstrap是如何通过div来代替过去的table布局的;一个是常用结构的熟悉,做到需要的组件及时...

3226
来自专栏数据小魔方

Python可视化笔记之folium交互地图

leftlet给R语言提供了很好用的交互式动态地图接口,其在Python中得API接口包名为folium(不知道包作者为何这样起名字,和leaflet已经扯不上...

2044
来自专栏Windows Community

Extensions in UWP Community Toolkit - FrameworkElement Extensions

概述 UWP Community Toolkit Extensions 中有一个为FrameworkElement 提供的扩展 - FrameworkEleme...

3428
来自专栏ASP.NET MVC5 后台权限管理系统

FullCalendar 日历插件中文说明文档

FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalend...

5038

扫码关注云+社区