一、插件功能

用于对图片进行修剪。但是在使用Jcrop时,还需要配合服务器端开发语言(如asp.net,php等)使用。

二、官方地址

http://deepliquid.com/content/Jcrop.html
在官方地址中有5个demo,在这5个demo中,有3个带有代码说明。有1个提供了完整的实例,前端(js)与后台(php)交互,修剪图片并显示。而本次测试时,后台使用的是asp.net来修剪图片。在文章的下面有完整的测试代码可供下载。
官方Demo也可以下载,但是下载下来的文件包含js代码很多,作者可能是为了演示jcrop的完整功能,所以包含了尽可能多的代码。其实我们在使用时,应该只会涉及到很简单的一部分。
测试效果截图:

三、插件使用

1.引用文件

<link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>

2.Css样式文件。测试时使用插件的默认样式,了解详细的样式定义可以看jquery.Jcrop.css。

3.Js代码。在官方Event Handler Demo中,使用了两个事件。分别为onChange,onSelect。OnChange事件在选取修剪范围时触发,onSelect在选取完毕后触发。本次测试只使用了onSelect事件。
如果需要动态显示缩略图,可以看官方提供的Thumbnail Demo。而且在这个Demo中,也提供了一种思路,那就是如何修剪等比例缩放的图片(按百分比寻找坐标位置)。在使用Jcrop修剪图片时,如果图片按比例缩小了,那么就需要按比例修改坐标,坐标为x(鼠标按下时的x坐标),y(鼠标按下时的y坐标),w(宽度),h(高度),都要替换为原图的坐标。但最简单的方式还是在上传图片的时候,就将图片按比例压缩,然后显示上传后的原图。
而本次测试使用的js代码主要分为两部分。
第一部分,修剪图片时保存坐标

$('#portrait').Jcrop({
onSelect: storeCoords
});
function storeCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};

第二部分,以ajax的方式提交坐标到后台

function toCrop() {
var x = $('#x').val();
var y = $('#y').val();
var w = $('#w').val();
var h = $('#h').val();
if ($.trim(x) == "" || $.trim(y) == "" || $.trim(w) == "" || $.trim(h) == "") {
console.log("数据不能为空!");
return;
}
var params="x="+x+"&y="+y+"&w="+w+"&h="+h;
$.ajax({
type: "POST",
url: "crop.ashx",
data: params,
success: function (html) {
console.log(html);
//显示返回的图片路径
$("#result").html('<img src="' + html + '"/>');
}
});
}

4.html代码。在html代码中,需要有元素保存第3步中提到的坐标,本次测试使用text保存坐标。

<img src="imgs/1.jpg"  id="portrait"/>
<br /><br />
<p id="result"></p>
<p><label for="x">x坐标</label><input type="text" id="x" /></p>
<p><label for="y">y坐标</label><input type="text" id="y" /></p>
<p><label for="w">宽度</label><input type="text" id="w" /></p>
<p><label for="h">高度</label><input type="text" id="h" /></p>
<p><input type="button" value="切割" id="btnCrop" /></p>

5.asp.net代码。通过ajax将坐标传入后台ashx文件,然后修剪原图并保存修剪后的图片,然后将修剪后的图片路径返回给前端,前端显示。

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string img = context.Server.MapPath("~/imgs/1.jpg");
int w = Convert.ToInt32(context.Request.Form["w"]);
int h = Convert.ToInt32(context.Request.Form["h"]);
int x = Convert.ToInt32(context.Request.Form["x"]);
int y = Convert.ToInt32(context.Request.Form["y"]);
byte[] CropImage = CropImg(img, w, h, x, y);
using (MemoryStream ms = new MemoryStream(CropImage, , CropImage.Length))
{
ms.Write(CropImage, , CropImage.Length);
using (SD.Image CroppedImage = SD.Image.FromStream(ms, true))
{
string saveTo = string.Format("imgs/crop/{0}.jpg", Guid.NewGuid().ToString().Replace("-",""));
CroppedImage.Save(context.Server.MapPath(saveTo), CroppedImage.RawFormat);
context.Response.Write(saveTo);
}
}
}
static byte[] CropImg(string img, int width, int height, int x, int y)
{
try
{
using (SD.Image OriginalImage = SD.Image.FromFile(img))
{
using (SD.Bitmap bmp = new SD.Bitmap(width, height))
{
bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);
using (SD.Graphics graphic = SD.Graphics.FromImage(bmp))
{
graphic.SmoothingMode = SmoothingMode.AntiAlias;
graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
graphic.DrawImage(OriginalImage, new SD.Rectangle(, , width, height), x, y, width, height, SD.GraphicsUnit.Pixel);
MemoryStream ms = new MemoryStream();
bmp.Save(ms, OriginalImage.RawFormat);
return ms.GetBuffer();
}
}
}
}
catch (Exception Ex)
{
throw (Ex);
}
}

测试环境+开发环境

测试环境:chrome,firefox,ie9(在ie下使用时,请注销掉console.log语句)
开发环境:vs2010

下载测试代码

网站开发常用jQuery插件总结(14)图片修剪插件Jcrop的更多相关文章

  1. 网站开发常用jQuery插件总结(七)背景插件backstretch

    一.backstretch插件功能 优化网站外观.主要用于设置页面背景图片,也可以设置html元素的背景图片.背景图片可以设置多张,在间隔时间内循环显示. 注 但是在设置背景图片时,如果图片过大,网站 ...

  2. 网站开发常用jQuery插件总结(六)关键词说明插件cluetip

    我们开发的网站,总有它一定的用途.如企业站用来宣传企业或展示产品,技术站用来分享自己的思路和经验.既然网站有了它的用途,那么就拥有了它本身的关键词(关键词说明网站的主要内容).例如企业站的关键词大部分 ...

  3. 网站开发常用jQuery插件总结(15)上传插件blueimp

    在介绍这个插件之前,先吐槽一下.这个插件功能很强大.带有的功能有:上传(单个文件或批量文件),自动上传或点击按钮上传,上传前缩略图显示,判断文件格式,上传前的文件操作,上传时进度条显示等功能.如果你用 ...

  4. 网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  5. 网站开发常用jQuery插件总结(三)拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  6. 网站开发常用jQuery插件总结(二)弹出层插件Lightbox

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  7. 网站开发常用jQuery插件总结(12)固定元素插件scrolltofixed

    这个插件在前段时间用过一次,当时是改一个网站.要求顶部的菜单栏随着滚动条的滚动而固定.也大体写了一下,不过在文章中也只是提了一下,文章地址:jQuery插件固定元素位置. 在这篇文章中,再进行总结一下 ...

  8. 网站开发常用jQuery插件总结(11)折叠插件Akordeon

    实现折叠菜单,可以完全不使用插件.如果使用jquery的话,实现起来也比较简单,我们只需要定义折叠菜单的样式,然后使用jquery中的渐隐渐现就可以了.如果我们自己写折叠菜单,可以方便的使用我们自己的 ...

  9. 网站开发常用jQuery插件总结(十)菜单插件superfish

    网站对于菜单的依赖其实并不是很大,我们完全可以不使用菜单来设计网站,显示网站内容.但是如果网站的分类太多,“也许”使用菜单作为网站导航可以使 用户 更方便的寻找内容.superfish插件就是用于实现 ...

随机推荐

  1. iOS网络编程(三) 异步加载及缓存图片---->SDWebImage

    @SDWebImage提供一个UIImageView的类别以支持加载来自网络的远程图片.具有缓存管理.异步下载.同一个URL下载次数控制和优化等特征. @SDWebImage的导入1.https:// ...

  2. 前端javascript规范文档 (http://www.xuanfengge.com/category/web)

    说明:本文档为前端JS规范 一.规范目的 为提高团队协作效率,便于前端后期优化维护,输出高质量的文档. 二.基本准则 符合web标准,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序, ...

  3. 用NGUI做一个计时条!

    1.建立两个UISprite. 2.建立脚本CountingTime 3.编写脚本 public class CountTime : MonoBehaviour { //时间计时器 public fl ...

  4. powerDesigner的初步使用

    今天初步学习了PowerDesigner,主要学习的内容有以下几个方面: 1.powerDesigner的功能之一是建立一个数据库的关系图,这里选用的数据库是MySql,基本的建立过程是这样的: a. ...

  5. Webview 中 Javascript 无法调用 Java 对象

    [问题产生] Webview 通过 addjavascriptInterface 传递对象给前端,一切正常.但是 Android官方已提醒此功能是有安全风险,改用 safe-java-js-webvi ...

  6. visual studio 2015提示IE10未安装

    将以下代码写入文本: @ECHO OFF :IE10HACK REG ADD "HKLM\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer&q ...

  7. Android实时监听网络状态(2)

    在开发android应用时,涉及到要进行网络访问,时常需要进行网络状态的检查,以提供给用户必要的提醒.一般可以通过ConnectivityManager来完成该工作. ConnectivityMana ...

  8. Android-怎样用命令行进行打包

    转载请标明出处:http://blog.csdn.net/goldenfish1919/article/details/40978859 1.生成R文件 aapt package -f -m -J . ...

  9. android应用程序的优先级

    andorid系统为保障应用程序运行的流畅性,当内存资源比较匮乏的时候会杀死那些优先级比较低的进程 android进程的优先级如下图: 1.活动进程: 是指那些正在与用户进行交互的应用程序进程,这种组 ...

  10. vim: 自己定义颜色主题(colorscheme)

    命令模式下输入 :hi[ghlight] 能够看到当前vim的着色风格 命令模式下输入 :sy[ntax] 能够看到当前语法加亮模式,当文档的文字与列表里的正則表達式匹配时,vim会给文字着色.应用缩 ...