一、插件功能

用于对图片进行修剪。但是在使用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. tensorflow 实现线性方程

    下面的直接是代码: #!usr/bin/env python#coding:utf-8"""这个代码的作用是 通过 tensorflow 来计算 y = 0.3x + 0 ...

  2. [Whole Web] [AngularJS + Grunt] Using ng-html2js to Convert Templates into JavaScript

    ng-html2js takes .html templates and converts them into strings stored in AngularJS's template cache ...

  3. ASP.NET 未被授权访问所请求的资源。请考虑授予 ASP.NET 请求标识访问此资源的权限

    开发了一个导入TXT文件的功能,执行过程中出错.提示:.....ASP.NET 未被授权访问所请求的资源.请考虑授予 ASP.NET 请求标识访问此资源的权限.ASP.NET 有一个在应用程序没有模拟 ...

  4. java中最简单的方式新起一个线程

    启动一个线程在一个方法中启动一个线程,有两种方法第一种是让类实现Runable接口,这样的话编译器就会提示你实现里面的未实现的方法(就是run方法)第二种是,现在方法中new一个线程,然后直接调用他的 ...

  5. hdu1002大数相加

    A + B Problem II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...

  6. Github + Hexo 搭建博客

    服务加速 brew 加速 http://blog.suconghou.cn/post/homebrew-speedup/ github加速 http://www.selfrebuild.net/201 ...

  7. 安装完Kali linux 之后 需要配置的一些 常用软件 记录

    apt 阿里云开源镜像站 deb http://mirrors.aliyun.com/kali sana main non-free contribdeb http://mirrors.aliyun. ...

  8. HttpClient 通过域名访问请求接口出现java.net.UnknownHostException解决方法

    在项目中,有一个功能需要请求另外一个项目的接口来获取数据.该项目接口都是通过域名请求访问.每当调用到一定阶段后都会出现未知域名,导致请求数据失败.以下是错误内容 java.net.UnknownHos ...

  9. Scala可变参数列表,命名参数和参数缺省

    重复参数 Scala在定义函数时允许指定最后一个参数可以重复(变长参数),从而允许函数调用者使用变长参数列表来调用该函数,Scala中使用“*”来指明该参数为重复参数.例如: scala> de ...

  10. Mybatis特殊字符处理,Mybatis中xml文件特殊字符的处理

    Mybatis特殊字符处理,Mybatis中xml文件特殊字符的处理 >>>>>>>>>>>>>>>>& ...