ホームページ >ウェブフロントエンド >jsチュートリアル >jquery画像キャプチャツール jquery.imagecropper.js_jquery
jquery画像キャプチャツール jquery.imagecropper.js_jquery
- WBOYオリジナル
- 2016-05-16 18:29:481126ブラウズ
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"]);
floatzoomLevel = 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)、上、左、幅、高さ) .WriteTo(context.Response.OutputStream);
}
public MemoryStream Crop(string imgPath, floatzoomLevel, int top, int left, int width, int height)
{
Image img = Image .FromFile(imgPath);
ビットマップ bitmap = new Bitmap( width, height);
Graphics.FromImage(bitmap);
g.DrawImage(img, new Rectangle(0, 0, width) 、高さ)、新しい Rectangle((int)(left /zoomLevel)、(int)(top /zoomLevel)、(int)(width /zoomLevel)、(int)(height /zoomLevel))、GraphicsUnit.Pixel); 🎜>MemoryStream ms = new MemoryStream();
img.Dispose();
>bitmap.Dispose();
return ms;
}
public bool IsReusable
{
get
}
}
}
ソース コードのコメントは比較的完全であるため、プラグインに焦点を当てています。コードはここに直接掲載されています:
コピーコード
コードは次のとおりです:{
string imgPath = Convert.ToString(context) .Request["p"]);
floatzoomLevel = 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)、上、左、幅、高さ) .WriteTo(context.Response.OutputStream);
}
public MemoryStream Crop(string imgPath, floatzoomLevel, int top, int left, int width, int height)
{
Image img = Image .FromFile(imgPath);
ビットマップ bitmap = new Bitmap( width, height);
Graphics.FromImage(bitmap);
g.DrawImage(img, new Rectangle(0, 0, width) 、高さ)、新しい Rectangle((int)(left /zoomLevel)、(int)(top /zoomLevel)、(int)(width /zoomLevel)、(int)(height /zoomLevel))、GraphicsUnit.Pixel); 🎜>MemoryStream ms = new MemoryStream();
img.Dispose();
>bitmap.Dispose();
return ms;
}
public bool IsReusable
{
get
}
}
}
ソース コードのコメントは比較的完全であるため、プラグインに焦点を当てています。コードはここに直接掲載されています:
コピーコード
/**
* 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('
this.wrapper.append(this.zoomWrapper);
$('.image-cropper-wrapper', this.wrapper).disableSelection();
this.reset();
//画像の操作
$('.crop-background', this.wrapper).draggable({
containment: $('.drag-containment', this.wrapper),
cursor: 'move',
drag: function(event, ui) {
var self = $(this).data('draggable');
//同時に移動前景図
$ ('.foreground-img', this.wrapper).css({
left: (parseInt(self.position.left) - context.settings.cropFrameRect.left - 1) 'px',
top: (parseInt(self.position.top) - context.settings.cropFrameRect.top - 1) 'px'
});
//得截图左上点坐标
context.settings.left = context. settings.cropFrameRect.left - parseInt($(this).css('left'));
context.settings.top = context.settings.cropFrameRect.top - parseInt($(this).css('top' ));
//移動画像のコールバック
context.fireCallback(context.settings.callbacks.dragging)
}
});
$('.foreground-img', this.wrapper).draggable({
containment: $('.drag-containment', this.wrapper),
cursor: 'move',
drag: function(event, ui) {
var self = $(this).data('draggable');
//同時移動背景
$('.crop-background', this. Wrapper).css({
left: (parseInt(self.position.left) context.settings.cropFrameRect.left 1) 'px',
top: (parseInt(self.position.top) context.settings .cropFrameRect.top 1) 'px'
});
//得截图左上点座標
context.settings.left = context.settings.cropFrameRect.left - parseInt($('.crop-背景', this.wrapper).css('left'));
context.settings.top = context.settings.cropFrameRect.top - parseInt($('.crop-background', this.wrapper).css ('top'));
//移動画像のコールバック
context.fireCallback(context.settings.callbacks.dragging);
//点击缩放
$('.zoom-out-button,.zoom-in-button', this.wrapper).click(function() {
var step = $(this). hasClass('ズームインボタン') ? context.settings.zoom.step : -context.settings.zoom.step;
var tempZoomLevel = context.settings.zoomLevel step,
//如果缩放级别超出范围 または缩放导致图片右下角没在截取框内则取消缩放
if (context.settings.zoomLevel >= context.settings.zoom.min
&& context.settings. zoomLevel <= context.settings.zoom.max
&& parseInt($('.crop-background', this.wrapper).css('left')) tempZoomLevel * context.img.width > .cropFrameRect.left context.settings.width
&& parseInt($('.crop-background', this.wrapper).css('top')) tempZoomLevel * context.img.height > .top context.settings.height
) {
context.settings.zoomLevel = tempZoomLevel;
context.zoom(context.img.width * context.settings.zoomLevel, context.img.height * context. settings.zoomLevel);
$('.zoom-scroller', this.wrapper).css('left', context.settings.zoomLevel * 200 / (context.settings.zoom.max - context.settings.zoom) .min) 'px');
}
context.fireCallback(context.settings.callbacks.zoomed);
});
//滚アニメーション条缩放
var cancelZoomScroll = false;
$('.zoom-scroller', this.wrapper).draggable({
包含: $('.zoom-scrollbar', this.wrapper),
軸: 'x',
ドラッグ: function(event, ui) {
var tempZoomLevel = (context.settings.zoom.max - context.settings.zoom.min) * parseInt($(this).css('left')) / 200 ;
//如果缩放级别超出范围 または缩放导致图片右下角没在截取框内则取消缩放
if (parseInt($('.crop-background', this.wrapper).css('left ')) tempZoomLevel * context.img.width > context.settings.cropFrameRect.left context.settings.width
&& parseInt($('.crop-background', this.wrapper).css('top') ) tempZoomLevel * context.img.height > context.settings.cropFrameRect.top context.settings.height
) {
context.settings.zoomLevel = tempZoomLevel; * context.settings.zoomLevel、context.img.height * context.settings.zoomLevel);
cancelZoomScroll = false;
context.fireCallback(context.settings.callbacks.zoomed); else {
cancelZoomScroll = true;
}
},
stop: function(event, ui) {
//如果缩放级别無效则重置滚動条的值
if (cancelZoomScroll) {
$('.zoom-scroller', this.wrapper).css('left', context.settings.zoomLevel * 200 / (context.settings.zoom.max - context.settings.zoom.分) 'px');
}
}
});
},
reset: function() {
this.img = new Image();
this.img.src = this.settings.imagePath;
//截取框大工作区，则放大工作区
var tempSize = {
width: Math.max(this.settings.cropWorkAreaSize.width, this.settings.width),
height : Math.max(this.settings.cropWorkAreaSize.height, this.settings.height)
};
//キャプチャ フレームがワークスペースの中央にある場合、キャプチャ フレームの位置をリセットします
if (this.settings.cropFrameRect.center) {
this.settings.cropFrameRect.left = (tempSize) . width - this.settings.width) / 2;
this.settings.cropFrameRect.top = (tempSize.height - this.settings.height) / 2;画像内にあります If (this.settings.center) {
this.settings.left = (this.img.width * this.settings.zoomLevel - this.settings .width) / 2; .top = (this.img.height * this.settings.zoomLevel - this.settings.height) / 2;
}
this.wrapper.width(tempSize.width 2).height(tempSize.height 25) );
$('.foreground-img,.background-img', this.wrapper).attr('src', this.settings.imagePath); 、this.wrapper).width(tempSize.width).height(tempSize.height);
$('.crop-frame', this.wrapper).css ({
左: this.settings.cropFrameRect .left 'px',
top: this.settings.cropFrameRect.top 'px',
width: this.settings.width 'px',
height: this.settings.height 'px'
});
$('.foreground-img', this.wrapper).css({
left: (-this.settings.cropFrameRect.left - 1) 'px',
top : (-this.settings.cropFrameRect.top - 1) 'px'
});
$('.zoom-scroller', this.wrapper) .css('left', this.settings.zoomLevel * 200 / (this.settings.zoom.max - this.settings.zoom.min) 'px');
$('.crop-background', this .wrapper).css({
不透明度: 0.3,
left: this.settings.cropFrameRect.left - this.settings.left 'px',
top: this.settings.cropFrameRect.top - this .settings.top 'px'
}) ;
$('.foreground-img', this.wrapper).css({
left: -this.settings.left 'px',
top: -this.settings.top 'px'
});
this.settings.left = this.settings.cropFrameRect.left - parseInt($('.crop-background', this.wrapper) .css('left')); this.settings.top = this.settings.cropFrameRect.top - parseInt($('.crop-background', this.wrapper).css('top'));
this.zoom(this.img.width) * this.settings.zoomLevel, this.img.height * this.settings.zoomLevel);
},
zoom: function(width, height) {
$('.crop-background, .background -img, .foreground-img', this.wrapper).width(width).height(height);
//ドラッグ制限ボックスを調整します
$ ('.drag-containment', this.wrapper) .css({
left: this.settings.cropFrameRect.left this.settings.width - this.settings.zoomLevel * this.img.width 1 'px',
top: this.settings.cropFrameRect.top this.settings.height - this.settings.zoomLevel * this.img.height 1 'px',
width: 2 * this.settings.zoomLevel * this.img .width - this.settings.width 'px',
高さ: 2 * this.settings.zoomLevel * this.img.height - this.settings.height 'px'
});
},
formatNumber: function(number, bit) {
return Math.round(number * Math.pow(10, bit)) / Math.pow(10, bit);
},
fireCallback : function(fn) {
if ($ .isFunction(fn)) {
fn.call(this)>}
})(jQuery );
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。