the latest code
This commit is contained in:
ghassan committed
1 parent
d28bc1ed43
commit
9bbb24a52b
12226 files changed
+1455579
-21
No files matched your search
+20
@@ -0,0 +1,20 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013 Alex Cornejo
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
+194
@@ -0,0 +1,194 @@
|
||||
# jquery-cropbox plugin.
|
||||
|
||||
jQuery plugin for in-place image cropping (zoom & pan, as opposed to select and drag).
|
||||
|
||||
This plugin depends only on jQuery. If either `Hammer.js` or `jquery.hammer.js` is
|
||||
loaded, the cropbox plugin will support gestures for panning and zooming
|
||||
the cropbox. Similary, if the `jquery.mousewheel.js` plugin is loaded, then the
|
||||
cropbox plugin will support zoom in & out using the mousewheel. All
|
||||
dependencies on third party libraries (other than jQuery) are strictly
|
||||
optional. Support for CommonJS and AMD loading is built in.
|
||||
|
||||
In browsers that support the HTML5 FIle API and Canvas API, the cropbox
|
||||
plugin provides mehtods to crop the image on the client and obtain the
|
||||
resulting cropped image as a Data URL or a binary blob to upload it to
|
||||
the server.
|
||||
|
||||
Check out the plugin in action here http://acornejo.github.io/jquery-cropbox/
|
||||
|
||||
**History:**
|
||||
This plugin started as a fork of
|
||||
[jQcrop](https://github.com/terebentina/jQcrop), and added touch
|
||||
support, mousewheel support and client resize support through the canvas
|
||||
api.
|
||||
|
||||
**Install with Bower:** `bower install cropbox`
|
||||
|
||||
## Usage
|
||||
|
||||
```javascript
|
||||
$('yourimage').cropbox({
|
||||
width: 200,
|
||||
height: 200
|
||||
}, function() {
|
||||
//on load
|
||||
console.log('Url: ' + this.getDataURL());
|
||||
}).on('cropbox', function(e, data) {
|
||||
console.log('crop window: ' + data);
|
||||
});
|
||||
```
|
||||
## Options
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Required</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>width</td>
|
||||
<td>integer</td>
|
||||
<td>200</td>
|
||||
<td>no</td>
|
||||
<td>Width in pixels of the cropping window</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>height</td>
|
||||
<td>integer</td>
|
||||
<td>200</td>
|
||||
<td>no</td>
|
||||
<td>Height in pixels of the cropping window</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zoom</td>
|
||||
<td>integer</td>
|
||||
<td>10</td>
|
||||
<td>no</td>
|
||||
<td>Number of incremental zoom steps. With the default of 10, you have to click the zoom-in button 9 times to reach 100%.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>maxZoom</td>
|
||||
<td>number</td>
|
||||
<td>1.0</td>
|
||||
<td>no</td>
|
||||
<td>Maximum zoom value. With the default of 1.0 users can't zoom beyond the maximum image resolution.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>controls</td>
|
||||
<td>string/jquery</td>
|
||||
<td>null</td>
|
||||
<td>no</td>
|
||||
<td>If not null, this is the entire html block that should appear on hover over the image for instructions and/or buttons (could include the zoom in/out buttons for example). If null, the default html block is used which has the text "Click to drag" and the zoom in/out buttons. Use false to disable controls.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>result</td>
|
||||
<td>{cropX:number, cropY:number, cropW:number, cropH:number}</td>
|
||||
<td>null</td>
|
||||
<td>no</td>
|
||||
<td>Set the initial cropping area</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>showControls</td>
|
||||
<td>never, always, hover, auto</td>
|
||||
<td>auto</td>
|
||||
<td>no</td>
|
||||
<td>This flag is used to determine when to display the controls. Never, always and hover do exactly what you would expect (never show them, always show them, show them on hover). The auto flag is the same as the hover flag, except that on mobile devices it always shows the controls (since there is no hover event).</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Methods
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zoomIn</td>
|
||||
<td>(none)</td>
|
||||
<td>Increase image zoom level by one step</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zoomOut</td>
|
||||
<td>(none)</td>
|
||||
<td>Decrease image zoom level by one step</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zoom</td>
|
||||
<td>percent</td>
|
||||
<td>Set zoom leevl to a value between 0 and 1. Need to call
|
||||
update to reflect the changes.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>drag</td>
|
||||
<td>{startX: integer, startY: integer, dx: integer, dy: integer}</td>
|
||||
<td>Simulate image dragging, starting from (startX,startY) and moving a delta of (dx,dy). Need to call update to reflect the changes.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>setCrop</td>
|
||||
<td>{cropX: number, cropY: number, cropW: number, cropH: number}</td>
|
||||
<td>Set crop window.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>update</td>
|
||||
<td>(none)</td>
|
||||
<td>Update the cropped result (must call after zoom and drag).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>getDataURL</td>
|
||||
<td>(none)</td>
|
||||
<td>Generate a URL for the cropped image on the client (requires HTML5 compliant browser).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>getBlob</td>
|
||||
<td>(none)</td>
|
||||
<td>Generate a Blob with the cropped image (requires HTML5 compliant browser).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>remove</td>
|
||||
<td>(none)</td>
|
||||
<td>Remove the cropbox functionality from the image.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Event
|
||||
|
||||
To get the crop results, bind a function on the `cropbox` event or read the object's result property .
|
||||
|
||||
```javascript
|
||||
$('yourimage').cropbox({width: 250, height: 250})
|
||||
.on('cropbox', function (e, result) {
|
||||
console.log(result);
|
||||
});
|
||||
```
|
||||
|
||||
A reference to the cropbox object can be accessed like so:
|
||||
```javascript
|
||||
var crop = $('yourimage').data('cropbox');
|
||||
console.log(crop.result);
|
||||
```
|
||||
or inside the onload function:
|
||||
```javascript
|
||||
var crop = $('yourimage').cropbox({}, function() {
|
||||
console.log(this.result);
|
||||
});
|
||||
```
|
||||
|
||||
You then have access to all the properties and methods used for that specific element.
|
||||
|
||||
## Bug Reporting
|
||||
|
||||
Use the [issues](https://github.com/acornejo/jquery-cropbox/issues)
|
||||
section to report any problems or questions regarding jquery-cropbox.
|
||||
|
||||
Please understand that I develop this plugin in my spare time, which is
|
||||
limited. To make the best use of my time, I ask that you submit
|
||||
a detailed bug report and include a [jsfiddle](http://jsfiddle.net) that
|
||||
exhibits the problem, otherwise I won't be able to offer much help.
|
||||
|
||||
A sample jsfiddle is provided [here](http://jsfiddle.net/Ak6d5/),
|
||||
fork it and create a minimal example that recreates the problem you
|
||||
are having and provide a link to it in the issue.
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "cropbox",
|
||||
"main": [
|
||||
"jquery.cropbox.css",
|
||||
"jquery.cropbox.js"
|
||||
],
|
||||
"version": "0.1.9",
|
||||
"homepage": "https://github.com/acornejo/jquery-cropbox",
|
||||
"authors": [
|
||||
"Alex Cornejo <[email protected]>"
|
||||
],
|
||||
"description": "jQuery plugin for cropping images.",
|
||||
"keywords": [
|
||||
"jquery",
|
||||
"crop",
|
||||
"cropping",
|
||||
"drag",
|
||||
"zoom",
|
||||
"pan",
|
||||
"touch",
|
||||
"mousewheel"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components"
|
||||
]
|
||||
}
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "cropbox",
|
||||
"title": "jquery-cropbox plugin",
|
||||
"keywords": [
|
||||
"jquery",
|
||||
"crop",
|
||||
"cropping",
|
||||
"drag",
|
||||
"zoom",
|
||||
"pan",
|
||||
"touch"
|
||||
],
|
||||
"version": "0.1.9",
|
||||
"author": {
|
||||
"name": "Alex Cornejo",
|
||||
"url": "https://github.com/acornejo"
|
||||
},
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "Alex Cornejo",
|
||||
"url": "https://github.com/acornejo"
|
||||
}
|
||||
],
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "http://opensource.org/licenses/MIT"
|
||||
}
|
||||
],
|
||||
"bugs": "https://github.com/acornejo/jquery-cropbox/issues",
|
||||
"homepage": "https://github.com/acornejo/jquery-cropbox",
|
||||
"docs": "https://github.com/acornejo/jquery-cropbox",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7"
|
||||
},
|
||||
"description": "jQuery plugin for in-place image cropping (zoom & pan, as opposed to select and drag).\n \n This plugin depends only on jQuery. If either `Hammer.js` or `jquery.hammer.js` is\n loaded, the cropbox plugin will support gestures for panning and zooming\n the cropbox. Similary, if the `jquery.mousewheel.js` plugin is loaded, then the\n cropbox plugin will support zoom in & out using the mousewheel. All\n dependencies on third party libraries (other than jQuery) are strictly\n optional. Support for CommonJS and AMD loading is built in.\n \n In browsers that support the HTML5 FIle API and Canvas API, the cropbox\n plugin provides mehtods to crop the image on the client and obtain the\n resulting cropped image as a Data URL or a binary blob to upload it to\n the server.\n \n Check out the plugin in action here http://acornejo.github.io/jquery-cropbox/"
|
||||
}
|
||||
+96
@@ -0,0 +1,96 @@
|
||||
.cropFrame {
|
||||
overflow : hidden;
|
||||
position : relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cropImage {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
cursor : move;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.cropControls {
|
||||
background : #000;
|
||||
width : 100%;
|
||||
height : 26px;
|
||||
position : absolute;
|
||||
z-index : 100;
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
opacity : 0;
|
||||
filter : alpha(opacity=0);
|
||||
transition : opacity .25s linear;
|
||||
-moz-transition : opacity .25s linear;
|
||||
-webkit-transition : opacity .25s linear;
|
||||
|
||||
t-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.cropFrame.hover .cropControls {
|
||||
opacity : .55;
|
||||
filter : alpha(opacity=55);
|
||||
}
|
||||
|
||||
.cropControls span {
|
||||
display : block;
|
||||
float : left;
|
||||
color : #fff;
|
||||
font-size : 11px;
|
||||
margin : 7px 0 0 5px;
|
||||
}
|
||||
|
||||
.cropZoomIn,
|
||||
.cropZoomOut {
|
||||
display : block;
|
||||
float : right;
|
||||
margin : 4px 4px 0 0;
|
||||
padding : 0;
|
||||
background : #fff;
|
||||
border: 1px solid #000;
|
||||
color : #000;
|
||||
border-radius : 4px;
|
||||
width : 18px;
|
||||
height : 18px;
|
||||
line-height : 16px;
|
||||
font-size : 18px;
|
||||
text-align : center;
|
||||
text-decoration : none;
|
||||
cursor : pointer;
|
||||
}
|
||||
|
||||
.cropZoomIn::after,
|
||||
.cropZoomIn .after {
|
||||
content : "+";
|
||||
display : block;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.cropZoomOut::after,
|
||||
.cropZoomOut .after {
|
||||
content : "-";
|
||||
display : block;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
/*IE8*/
|
||||
.cropZoomIn:after,
|
||||
.cropZoomIn .after {
|
||||
content : "+";
|
||||
display : block;
|
||||
text-align:center;
|
||||
}
|
||||
/*IE8*/
|
||||
.cropZoomOut:after,
|
||||
.cropZoomOut .after {
|
||||
content : "-";
|
||||
display : block;
|
||||
text-align:center;
|
||||
}
|
||||
+287
@@ -0,0 +1,287 @@
|
||||
(function() {
|
||||
var supportsCanvas = document.createElement('canvas');
|
||||
supportsCanvas = !!(supportsCanvas.getContext && supportsCanvas.getContext('2d'));
|
||||
|
||||
// helper functions
|
||||
function is_touch_device() {
|
||||
return 'ontouchstart' in window || // works on most browsers
|
||||
'onmsgesturechange' in window; // works on ie10
|
||||
}
|
||||
|
||||
function fill(value, target, container) {
|
||||
if (value + target < container)
|
||||
value = container - target;
|
||||
return value > 0 ? 0 : value;
|
||||
}
|
||||
|
||||
function uri2blob(dataURI) {
|
||||
var uriComponents = dataURI.split(',');
|
||||
var byteString = atob(uriComponents[1]);
|
||||
var mimeString = uriComponents[0].split(':')[1].split(';')[0];
|
||||
var ab = new ArrayBuffer(byteString.length);
|
||||
var ia = new Uint8Array(ab);
|
||||
for (var i = 0; i < byteString.length; i++)
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
return new Blob([ab], { type: mimeString });
|
||||
}
|
||||
|
||||
var pluginName = 'cropbox';
|
||||
|
||||
function factory($) {
|
||||
function Crop($image, options, on_load) {
|
||||
this.width = null;
|
||||
this.height = null;
|
||||
this.img_width = null;
|
||||
this.img_height = null;
|
||||
this.img_left = 0;
|
||||
this.img_top = 0;
|
||||
this.minPercent = null;
|
||||
this.options = options;
|
||||
this.$image = $image;
|
||||
this.$image.hide().prop('draggable', false).addClass('cropImage').wrap('<div class="cropFrame" />'); // wrap image in frame;
|
||||
this.$frame = this.$image.parent();
|
||||
this.on_load = on_load || function() {};
|
||||
this.init();
|
||||
}
|
||||
|
||||
Crop.prototype = {
|
||||
init: function () {
|
||||
var self = this;
|
||||
|
||||
var defaultControls = $('<div/>', { 'class' : 'cropControls' })
|
||||
.append($('<span>'+this.options.label+'</span>'))
|
||||
.append($('<button/>', { 'class' : 'cropZoomIn', 'type':'button' }).on('click', $.proxy(this.zoomIn, this)))
|
||||
.append($('<button/>', { 'class' : 'cropZoomOut', 'type':'button' }).on('click', $.proxy(this.zoomOut, this)));
|
||||
|
||||
this.$frame.append(this.options.controls || defaultControls);
|
||||
this.updateOptions();
|
||||
|
||||
if (typeof $.fn.hammer === 'function' || typeof Hammer !== 'undefined') {
|
||||
var hammerit, dragData;
|
||||
if (typeof $.fn.hammer === 'function')
|
||||
hammerit = this.$image.hammer().data('hammer'); // Get the hammer instance after it has been created.
|
||||
else
|
||||
hammerit = Hammer(this.$image.get(0));
|
||||
// Enable panning in all directions without any threshold.
|
||||
hammerit.get('pan').set({ direction: Hammer.DIRECTION_ALL, threshold: 0 });
|
||||
// Enable pinching.
|
||||
hammerit.get('pinch').set({ enable: true });
|
||||
hammerit.on('panleft panright panup pandown', function(e) {
|
||||
if (!dragData)
|
||||
dragData = {
|
||||
startX: self.img_left,
|
||||
startY: self.img_top // Some IE versions complained about the extra comma.
|
||||
};
|
||||
dragData.dx = e.deltaX;
|
||||
dragData.dy = e.deltaY;
|
||||
e.preventDefault();
|
||||
self.drag.call(self, dragData, true);
|
||||
}).on('panend pancancel', function(e) {
|
||||
e.preventDefault();
|
||||
dragData = null;
|
||||
self.update.call(self);
|
||||
}).on('doubletap', function(e) {
|
||||
e.preventDefault();
|
||||
self.zoomIn.call(self);
|
||||
}).on('pinchin', function (e) {
|
||||
e.preventDefault();
|
||||
self.zoomOut.call(self);
|
||||
}).on('pinchout', function (e) {
|
||||
e.preventDefault();
|
||||
self.zoomIn.call(self);
|
||||
});
|
||||
} else {
|
||||
// prevent IE8's default drag functionality
|
||||
this.$image.on("dragstart", function () { return false; });
|
||||
this.$image.on('mousedown.' + pluginName, function(e1) {
|
||||
var dragData = {
|
||||
startX: self.img_left,
|
||||
startY: self.img_top
|
||||
};
|
||||
e1.preventDefault();
|
||||
$(document).on('mousemove.' + pluginName, function (e2) {
|
||||
dragData.dx = e2.pageX - e1.pageX;
|
||||
dragData.dy = e2.pageY - e1.pageY;
|
||||
self.drag.call(self, dragData, true);
|
||||
}).on('mouseup.' + pluginName, function() {
|
||||
self.update.call(self);
|
||||
$(document).off('mouseup.' + pluginName);
|
||||
$(document).off('mousemove.' + pluginName);
|
||||
});
|
||||
});
|
||||
}
|
||||
if ($.fn.mousewheel) {
|
||||
this.$image.on('mousewheel.' + pluginName, function (e) {
|
||||
e.preventDefault();
|
||||
if (e.deltaY < 0)
|
||||
self.zoomIn.call(self);
|
||||
else
|
||||
self.zoomOut.call(self);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
updateOptions: function () {
|
||||
var self = this;
|
||||
self.img_top = 0;
|
||||
self.img_left = 0;
|
||||
self.$image.css({width: '', left: self.img_left, top: self.img_top});
|
||||
self.$frame.width(self.options.width).height(self.options.height);
|
||||
self.$frame.off('.' + pluginName);
|
||||
self.$frame.removeClass('hover');
|
||||
if (self.options.showControls === 'always' || self.options.showControls === 'auto' && is_touch_device())
|
||||
self.$frame.addClass('hover');
|
||||
else if (self.options.showControls !== 'never') {
|
||||
self.$frame.on('mouseenter.' + pluginName, function () { self.$frame.addClass('hover'); });
|
||||
self.$frame.on('mouseleave.' + pluginName, function () { self.$frame.removeClass('hover'); });
|
||||
}
|
||||
|
||||
// Image hack to get width and height on IE
|
||||
var img = new Image();
|
||||
img.onload = function () {
|
||||
self.width = img.width;
|
||||
self.height = img.height;
|
||||
img.src = '';
|
||||
img.onload = null;
|
||||
self.percent = undefined;
|
||||
self.fit.call(self);
|
||||
if (self.options.result)
|
||||
self.setCrop.call(self, self.options.result);
|
||||
else
|
||||
self.zoom.call(self, self.minPercent);
|
||||
self.$image.fadeIn('fast');
|
||||
self.on_load.call(self);
|
||||
};
|
||||
// onload has to be set before src for IE8
|
||||
// otherwise it never fires
|
||||
img.src = self.$image.attr('src');
|
||||
},
|
||||
|
||||
remove: function () {
|
||||
var hammerit;
|
||||
if (typeof $.fn.hammer === 'function')
|
||||
hammerit = this.$image.data('hammer'); // Get hammer instance object.
|
||||
else if (typeof Hammer !== 'undefined')
|
||||
hammerit = Hammer(this.$image.get(0));
|
||||
if (hammerit)
|
||||
hammerit.off('panleft panright panup pandown panend pancancel doubletap pinchin pinchout');
|
||||
this.$frame.off('.' + pluginName);
|
||||
this.$image.off('.' + pluginName);
|
||||
this.$image.css({width: '', left: '', top: ''});
|
||||
this.$image.removeClass('cropImage');
|
||||
this.$image.removeData(pluginName);
|
||||
this.$image.insertAfter(this.$frame);
|
||||
this.$frame.removeClass('cropFrame');
|
||||
this.$frame.removeAttr('style');
|
||||
this.$frame.empty();
|
||||
this.$frame.remove();
|
||||
},
|
||||
|
||||
fit: function () {
|
||||
var widthRatio = this.options.width / this.width,
|
||||
heightRatio = this.options.height / this.height;
|
||||
this.minPercent = (widthRatio >= heightRatio) ? widthRatio : heightRatio;
|
||||
},
|
||||
|
||||
setCrop: function (result) {
|
||||
this.percent = Math.max(this.options.width/result.cropW, this.options.height/result.cropH);
|
||||
this.img_width = Math.ceil(this.width*this.percent);
|
||||
this.img_height = Math.ceil(this.height*this.percent);
|
||||
this.img_left = -Math.floor(result.cropX*this.percent);
|
||||
this.img_top = -Math.floor(result.cropY*this.percent);
|
||||
this.$image.css({ width: this.img_width, left: this.img_left, top: this.img_top });
|
||||
this.update();
|
||||
},
|
||||
|
||||
zoom: function(percent) {
|
||||
var old_percent = this.percent;
|
||||
|
||||
this.percent = Math.max(this.minPercent, Math.min(this.options.maxZoom, percent));
|
||||
this.img_width = Math.ceil(this.width * this.percent);
|
||||
this.img_height = Math.ceil(this.height * this.percent);
|
||||
|
||||
if (old_percent) {
|
||||
var zoomFactor = this.percent / old_percent;
|
||||
this.img_left = fill((1 - zoomFactor) * this.options.width / 2 + zoomFactor * this.img_left, this.img_width, this.options.width);
|
||||
this.img_top = fill((1 - zoomFactor) * this.options.height / 2 + zoomFactor * this.img_top, this.img_height, this.options.height);
|
||||
} else {
|
||||
this.img_left = fill((this.options.width - this.img_width) / 2, this.img_width, this.options.width);
|
||||
this.img_top = fill((this.options.height - this.img_height) / 2, this.img_height, this.options.height);
|
||||
}
|
||||
|
||||
this.$image.css({ width: this.img_width, left: this.img_left, top: this.img_top });
|
||||
this.update();
|
||||
},
|
||||
zoomIn: function() {
|
||||
this.zoom(this.percent + (1 - this.minPercent) / (this.options.zoom - 1 || 1));
|
||||
},
|
||||
zoomOut: function() {
|
||||
this.zoom(this.percent - (1 - this.minPercent) / (this.options.zoom - 1 || 1));
|
||||
},
|
||||
drag: function(data, skipupdate) {
|
||||
this.img_left = fill(data.startX + data.dx, this.img_width, this.options.width);
|
||||
this.img_top = fill(data.startY + data.dy, this.img_height, this.options.height);
|
||||
this.$image.css({ left: this.img_left, top: this.img_top });
|
||||
if (!skipupdate)
|
||||
this.update();
|
||||
},
|
||||
update: function() {
|
||||
this.result = {
|
||||
cropX: -Math.ceil(this.img_left / this.percent),
|
||||
cropY: -Math.ceil(this.img_top / this.percent),
|
||||
cropW: Math.floor(this.options.width / this.percent),
|
||||
cropH: Math.floor(this.options.height / this.percent),
|
||||
stretch: this.minPercent > 1
|
||||
};
|
||||
|
||||
this.$image.trigger(pluginName, [this.result, this]);
|
||||
},
|
||||
getDataURL: function () {
|
||||
if(!supportsCanvas) {
|
||||
// return an empty string for browsers that don't support canvas.
|
||||
// this allows it to fail gracefully.
|
||||
return false;
|
||||
}
|
||||
var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d');
|
||||
canvas.width = this.options.width;
|
||||
canvas.height = this.options.height;
|
||||
ctx.drawImage(this.$image.get(0), this.result.cropX, this.result.cropY, this.result.cropW, this.result.cropH, 0, 0, this.options.width, this.options.height);
|
||||
return canvas.toDataURL();
|
||||
},
|
||||
getBlob: function () {
|
||||
return uri2blob(this.getDataURL());
|
||||
}
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function(options, on_load) {
|
||||
return this.each(function() {
|
||||
var $this = $(this), inst = $this.data(pluginName);
|
||||
if (!inst) {
|
||||
var opts = $.extend({}, $.fn[pluginName].defaultOptions, options);
|
||||
$this.data(pluginName, new Crop($this, opts, on_load));
|
||||
} else if (options) {
|
||||
$.extend(inst.options, options);
|
||||
inst.updateOptions();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$.fn[pluginName].defaultOptions = {
|
||||
width: 200,
|
||||
height: 200,
|
||||
zoom: 10,
|
||||
maxZoom: 1,
|
||||
controls: null,
|
||||
showControls: 'auto',
|
||||
label: 'Drag to crop'
|
||||
};
|
||||
}
|
||||
|
||||
if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
|
||||
factory(require("jquery"));
|
||||
else if (typeof define === "function" && define.amd)
|
||||
define(["jquery"], factory);
|
||||
else
|
||||
factory(window.jQuery || window.Zepto);
|
||||
|
||||
})();
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "jquery-cropbox",
|
||||
"version": "0.1.9",
|
||||
"author": "Alex Cornejo",
|
||||
"main": "jquery.cropbox.js",
|
||||
"devDependencies": {
|
||||
"uglifycss": "0.0.7",
|
||||
"uglify-js": "~2.4.0",
|
||||
"jshint": "~2.3.0"
|
||||
},
|
||||
"dependencies": {},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/acornejo/jquery-cropbox.git",
|
||||
"web": "https://github.com/acornejo/jquery-cropbox"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "http://opensource.org/licenses/MIT"
|
||||
}
|
||||
],
|
||||
"scripts": {
|
||||
"prepublish": "./node_modules/.bin/uglifyjs -o jquery.cropbox.min.js jquery.cropbox.js; ./node_modules/.bin/uglifycss jquery.cropbox.css > jquery.cropbox.min.css",
|
||||
"pretest": "./node_modules/.bin/jshint -e 'js,json' --exclude node_modules ."
|
||||
},
|
||||
"description": "jQuery plugin for in-place image cropping (zoom & pan, as opposed to select and drag).\n \n This plugin depends only on jQuery. If either `Hammer.js` or `jquery.hammer.js` is\n loaded, the cropbox plugin will support gestures for panning and zooming\n the cropbox. Similary, if the `jquery.mousewheel.js` plugin is loaded, then the\n cropbox plugin will support zoom in & out using the mousewheel. All\n dependencies on third party libraries (other than jQuery) are strictly\n optional. Support for CommonJS and AMD loading is built in.\n \n In browsers that support the HTML5 FIle API and Canvas API, the cropbox\n plugin provides mehtods to crop the image on the client and obtain the\n resulting cropped image as a Data URL or a binary blob to upload it to\n the server.\n \n Check out the plugin in action here http://acornejo.github.io/jquery-cropbox/"
|
||||
}
|
||||
Reference in new issue
Block a user