jquery 图片截取工具jquery.imagecropper.js

2020-05-24 21:26:46易采站长站整理

除了jquery,本插件还引用了UI库,包括ui.draggable.js
ImageCropper 演示需要asp.net支持。测试通过
ImageCropper 下载 //www.jb51.net/jiaoben/25688.html
插件用法:

var imageCropper = $(‘#imgBackground’).imageCropper();

要注意的是此插件只应用在有src属性的img标签上。
通过插件输出的参数,即可以通过服务器端代码截取图片,比如:

$(‘#imgCroppedImage’).attr(‘src’, ‘CropImage.ashx?p=’ + imageCropper.settings.imagePath + ‘&z=’ + imageCropper.settings.zoomLevel + ‘&t=’ + imageCropper.settings.top + ‘&l=’ + imageCropper.settings.left + ‘&w=’ + imageCropper.settings.width + ‘&h=’ + imageCropper.settings.height + ‘&’ + Math.random());

asp.net hander CropImage.ashx:

public class CropImage : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string imgPath = Convert.ToString(context.Request[“p”]);
float zoomLevel = Convert.ToSingle(context.Request[“z”]);
int top = Convert.ToInt32(context.Request[“t”]);
int left = Convert.ToInt32(context.Request[“l”]);
int width = Convert.ToInt32(context.Request[“w”]);
int height = Convert.ToInt32(context.Request[“h”]);
context.Response.ContentType = “image/jpeg”;
Crop(HttpContext.Current.Server.MapPath(imgPath), zoomLevel, top, left, width, height).WriteTo(context.Response.OutputStream);
}
public MemoryStream Crop(string imgPath, float zoomLevel, int top, int left, int width, int height)
{
Image img = Image.FromFile(imgPath);
Bitmap bitmap = new Bitmap(width, height);
Graphics g = Graphics.FromImage(bitmap);
g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle((int)(left / zoomLevel), (int)(top / zoomLevel), (int)(width / zoomLevel), (int)(height / zoomLevel)), GraphicsUnit.Pixel);
MemoryStream ms = new MemoryStream();
bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
img.Dispose();
g.Dispose();
bitmap.Dispose();
return ms;
}
public bool IsReusable
{
get
{
return false;
}
}
}

重点是插件,因为源代码注释比较全,直接贴代码在这:

/**
* Copyright (c) 2010 Viewercq (http://www.cnblogs.com/viewercq/archive/2010/04/04/1704093.html)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Version: 1.0
*
* Demo: https://dl.dropbox.com/u/4390741/ImageCropper.htm
*/
; (function($) {
$.fn.extend({
imageCropper: function(options) {
if (!this.is(‘img’) || typeof this.attr(‘src’) == ‘undefined’ || this.attr(‘src’) == ”) {