今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件，这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例，可以设置高宽尺寸，同时可以设置图片翻转角度，当然也支持图片的缩放，裁剪框也可以用鼠标拖动。效果图如下：
来看看实现的代码，这里我们主要来看JavaScript代码
获取图片的Canvas画布：
function getSourceCanvas(image, data) {
var canvas = $('<canvas>')[0],
context = canvas.getContext('2d'),
width = data.naturalWidth,
height = data.naturalHeight,
rotate = data.rotate,
rotated = getRotatedSizes({
width: width,
height: height,
degree: rotate
});
if (rotate) {
canvas.width = rotated.width;
canvas.height = rotated.height;
context.save();
context.translate(rotated.width / 2, rotated.height / 2);
context.rotate(rotate * Math.PI / 180);
context.drawImage(image, -width / 2, -height / 2, width, height);
context.restore();
} else {
canvas.width = width;
canvas.height = height;
context.drawImage(image, 0, 0, width, height);
}
return canvas;
}
加载图片：
prototype.load = function (url) {
var options = this.options,
$this = this.$element,
crossOrigin,
bustCacheUrl,
buildEvent,
$clone;
if (!url) {
if ($this.is('img')) {
if (!$this.attr('src')) {
return;
}
url = $this.prop('src');
} else if ($this.is('canvas') && SUPPORT_CANVAS) {
url = $this[0].toDataURL();
}
}
if (!url) {
return;
}
buildEvent = $.Event(EVENT_BUILD);
$this.one(EVENT_BUILD, options.build).trigger(buildEvent); // Only trigger once
if (buildEvent.isDefaultPrevented()) {
return;
}
if (options.checkImageOrigin && isCrossOriginURL(url)) {
crossOrigin = 'anonymous';
if (!$this.prop('crossOrigin')) { // Only when there was not a "crossOrigin" property
bustCacheUrl = addTimestamp(url); // Bust cache (#148)
}
}
this.$clone = $clone = $('<img>');
$clone.one('load', $.proxy(function () {
var naturalWidth = $clone.prop('naturalWidth') || $clone.width(),
naturalHeight = $clone.prop('naturalHeight') || $clone.height();
this.image = {
naturalWidth: naturalWidth,
naturalHeight: naturalHeight,
aspectRatio: naturalWidth / naturalHeight,
rotate: 0
};
this.url = url;
this.ready = true;
this.build();
}, this)).one('error', function () {
$clone.remove();
}).attr({
src: bustCacheUrl || url,
crossOrigin: crossOrigin
});
// Hide and insert into the document
$clone.addClass(CLASS_HIDE).insertAfter($this);
};
预览截图：
prototype.initPreview = function () {
var url = this.url;
this.$preview = $(this.options.preview);
this.$viewBox.html('<img src="' + url + '">');
// Override img element styles
// Add `display:block` to avoid margin top issue (Occur only when margin-top <= -height)
this.$preview.each(function () {
var $this = $(this);
$this.data(CROPPER_PREVIEW, {
width: $this.width(),
height: $this.height(),
original: $this.html()
}).html('<img src="' + url + '" style="display:block;width:100%;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;image-orientation: 0deg!important">');
});
};