집 >웹 프론트엔드 >JS 튜토리얼 >jquery 이미지 캡처 도구 jquery.imagecropper.js_jquery

jquery 이미지 캡처 도구 jquery.imagecropper.js_jquery

WBOY원래의: 2016-05-16 18:29:481120검색

jquery 외에도 이 플러그인은 ui.draggable.js를 포함한 UI 라이브러리도 참조합니다.
ImageCropper 데모에는 asp.net 지원이 필요합니다. 테스트 통과
ImageCropper 다운로드http://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 핸들러 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, 상단, 왼쪽, 너비, 높이) .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); 
그래픽 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.드로잉.Imaging.ImageFormat.Jpeg) 
img.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') == '') {
throw 'Please notice that this jquery plguin only could be applied to img and the src of img could not be null!';
}
var defaults = {
//原图路径
imagePath: this.attr('src'),
//缩放级别
zoomLevel: 1,
//图片相对于截取框是否居中
center: false,
//截取框与图片的相对位置
left: 0, top: 0,
//截取框的大小
width: 200, height: 200,
//工作区大小
cropWorkAreaSize: { width: 600, height: 400 },
//截取框相对于工作区的位置
cropFrameRect: { center: true, top: 0, left: 0 },
//缩放范围
zoom: { min: 0, max: 2, step: 0.01 },
//回调函数
callbacks: {
//移动图片后
dragging: false,
//缩放后
zoomed: false
}
};
if (options) {
defaults = $.extend(defaults, options);
}
return new imageCropper(this, defaults);
}
});
function imageCropper(image, settings) {
this.init(image, settings);
};
imageCropper.prototype = {
settings: false,
wrapper: $('

'),
zoomWrapper: $('

'),
img: false,
init: function(image, settings) {
var context = this;
this.settings = settings;
image.addClass('background-img');
//生成html
image.wrap(this.wrapper).wrap('

').wrap('

');
this.wrapper = $('.image-cropper-wrapper');
$('.crop-work-area', this.wrapper).append('

성명：

이전 기사：jquery(asp.net jquery)_jquery를 기반으로 한 이미지 확인란의 3Z 버전다음 기사：jquery(asp.net jquery)_jquery를 기반으로 한 이미지 확인란의 3Z 버전

jquery 이미지 캡처 도구 jquery.imagecropper.js_jquery

관련 기사