image-clipper - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

bower.json

 {
     "name": "image-clipper",
-    "version": "0.2.3",
+    "version": "0.3.0",
     "main": "dist/imageClipper.js",
@@ -5,0 +5,0 @@ "ignore": [

dist/imageClipper.js

 /*
- * image-clipper 0.2.3
- * Crop your images purely using the native Canvas APIs, for the Browser & Electron & NW.js (Node-webkit), without any image processing library dependencies.
+ * image-clipper 0.3.0
+ * Node.js module for clip & crop JPEG, PNG, WebP images purely using the native Canvas APIs, excellent compatibility with the Browser & Electron & NW.js (Node-webkit), itself doesn't relies on any image processing libraries.
  * https://github.com/superRaytin/image-clipper
@@ -10,2 +10,2 @@ *
 
-!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){(function(c){function d(a){return a=a||{},this.maxQualityLevel=a.maxQualityLevel||.92,this.minQualityLevel=a.minQualityLevel||.01,this.qualityLevel=a.quality||this.maxQualityLevel,this}function e(a){for(var b=["imageFormat"],c=0,d=b.length;d>c;c++){var e=b[c];!function(b){a.prototype["set"+g.upperCase(b)]=function(a){this[b]=a}}(e)}}var f=a("fs"),g=a("./utils"),h=window.document,i=window.Image;d.prototype.loadImageFromMemory=function(a){var b=h.createElement("canvas"),c=b.getContext("2d");a=a||this.originalImage;var d=a.width,e=a.height,f=a.getAttribute("src");return b.width=d,b.height=e,c.drawImage(a,0,0,d,e),this.canvas=b,this.imageFormat=this.imageFormat||g.getImageFormat(f)||"image/jpeg",this.originalImage||(this.originalImage=a),this},d.prototype.loadImageFromUrl=function(a,b){var c=this,d=new i;d.onload=function(){c.loadImageFromMemory(d),b.call(c)},d.src=a},d.prototype.crop=function(a,b,c,d,e){var f=this.getCropDataUrl(a,b,c,d);e.call(this,f)},d.prototype.getCropDataUrl=function(a,b,c,d){var e=this.imageFormat,f=this.qualityLevel,g=this.canvas,i=g.getContext("2d"),j=i.getImageData(a,b,c,d),k=h.createElement("canvas"),l=k.getContext("2d");k.width=c,k.height=d,l.rect(0,0,c,d),l.fillStyle="white",l.fill(),l.putImageData(j,0,0);var m=k.toDataURL(e,f);return k=l=null,m},d.prototype.toFile=function(a,b,d){2===arguments.length&&(d=b,b=this.toDataUrl());var e=g.isElectronOrNW();if(!e)return d.call(this,b),b;var h=this.imageFormat,i=b.replace("data:"+h+";base64,","").replace("data:image/jpg;base64,",""),j=new c(i,"base64");f.writeFile(a,j,function(a){return a?console.log(a):void d.call(this)})},d.prototype.clearArea=function(a,b,c,d){var e=this.canvas,f=e.getContext("2d");return f.clearRect(a,b,c,d),f.fillStyle="#fff",f.fillRect(a,b,c,d),this},d.prototype.quality=function(a){return a=parseFloat(a),a=a>.92?.92:.01>a?.01:a,this.qualityLevel=a,this},d.prototype.toDataUrl=function(a){a=a||this.qualityLevel;var b=this.canvas,c=this.imageFormat;return b.toDataURL(c,a)},d.prototype.getCanvas=function(){return this.canvas},d.prototype.destroy=function(){return this.canvas=null,this},d.prototype.reset=function(){return this.destroy().loadImageFromMemory()},e(d),"function"==typeof define&&define.amd?define(function(){return d}):"undefined"!=typeof window&&(window.ImageClipper=d),b.exports=d}).call(this,a("buffer").Buffer)},{"./utils":2,buffer:4,fs:3}],2:[function(a,b,c){(function(a,c){var d={};d.getImageFormat=function(a){var b=a.substr(a.lastIndexOf(".")+1,a.length);return b="jpg"===b?"jpeg":b,"image/"+b},d.upperCase=function(a){return a.replace(a.charAt(0),function(a){return a.toUpperCase()})},d.isBrowser=function(){return"undefined"!=typeof window&&"undefined"!=typeof navigator},d.supportImageObj=function(){return"undefined"!=typeof Image},d.isElectronOrNW=function(){return"undefined"!=typeof c&&"undefined"!=typeof a&&"undefined"!=typeof a.platform},d.isNW=function(){return!("undefined"==typeof c||!c.gui||!c.gui.Menu)},b.exports=d}).call(this,a("_process"),"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{_process:8}],3:[function(a,b,c){},{}],4:[function(a,b,c){(function(b){function d(){function a(){}try{var b=new Uint8Array(1);return b.foo=function(){return 42},b.constructor=a,42===b.foo()&&b.constructor===a&&"function"==typeof b.subarray&&0===b.subarray(1,1).byteLength}catch(c){return!1}}function e(){return f.TYPED_ARRAY_SUPPORT?2147483647:1073741823}function f(a){return this instanceof f?(this.length=0,this.parent=void 0,"number"==typeof a?g(this,a):"string"==typeof a?h(this,a,arguments.length>1?arguments[1]:"utf8"):i(this,a)):arguments.length>1?new f(a,arguments[1]):new f(a)}function g(a,b){if(a=p(a,0>b?0:0|q(b)),!f.TYPED_ARRAY_SUPPORT)for(var c=0;b>c;c++)a[c]=0;return a}function h(a,b,c){("string"!=typeof c||""===c)&&(c="utf8");var d=0|s(b,c);return a=p(a,d),a.write(b,c),a}function i(a,b){if(f.isBuffer(b))return j(a,b);if(Y(b))return k(a,b);if(null==b)throw new TypeError("must start with number, buffer, array or string");if("undefined"!=typeof ArrayBuffer){if(b.buffer instanceof ArrayBuffer)return l(a,b);if(b instanceof ArrayBuffer)return m(a,b)}return b.length?n(a,b):o(a,b)}function j(a,b){var c=0|q(b.length);return a=p(a,c),b.copy(a,0,0,c),a}function k(a,b){var c=0|q(b.length);a=p(a,c);for(var d=0;c>d;d+=1)a[d]=255&b[d];return a}function l(a,b){var c=0|q(b.length);a=p(a,c);for(var d=0;c>d;d+=1)a[d]=255&b[d];return a}function m(a,b){return f.TYPED_ARRAY_SUPPORT?(b.byteLength,a=f._augment(new Uint8Array(b))):a=l(a,new Uint8Array(b)),a}function n(a,b){var c=0|q(b.length);a=p(a,c);for(var d=0;c>d;d+=1)a[d]=255&b[d];return a}function o(a,b){var c,d=0;"Buffer"===b.type&&Y(b.data)&&(c=b.data,d=0|q(c.length)),a=p(a,d);for(var e=0;d>e;e+=1)a[e]=255&c[e];return a}function p(a,b){f.TYPED_ARRAY_SUPPORT?(a=f._augment(new Uint8Array(b)),a.__proto__=f.prototype):(a.length=b,a._isBuffer=!0);var c=0!==b&&b<=f.poolSize>>>1;return c&&(a.parent=Z),a}function q(a){if(a>=e())throw new RangeError("Attempt to allocate Buffer larger than maximum size: 0x"+e().toString(16)+" bytes");return 0|a}function r(a,b){if(!(this instanceof r))return new r(a,b);var c=new f(a,b);return delete c.parent,c}function s(a,b){"string"!=typeof a&&(a=""+a);var c=a.length;if(0===c)return 0;for(var d=!1;;)switch(b){case"ascii":case"binary":case"raw":case"raws":return c;case"utf8":case"utf-8":return R(a).length;case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return 2*c;case"hex":return c>>>1;case"base64":return U(a).length;default:if(d)return R(a).length;b=(""+b).toLowerCase(),d=!0}}function t(a,b,c){var d=!1;if(b=0|b,c=void 0===c||c===1/0?this.length:0|c,a||(a="utf8"),0>b&&(b=0),c>this.length&&(c=this.length),b>=c)return"";for(;;)switch(a){case"hex":return F(this,b,c);case"utf8":case"utf-8":return B(this,b,c);case"ascii":return D(this,b,c);case"binary":return E(this,b,c);case"base64":return A(this,b,c);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return G(this,b,c);default:if(d)throw new TypeError("Unknown encoding: "+a);a=(a+"").toLowerCase(),d=!0}}function u(a,b,c,d){c=Number(c)||0;var e=a.length-c;d?(d=Number(d),d>e&&(d=e)):d=e;var f=b.length;if(f%2!==0)throw new Error("Invalid hex string");d>f/2&&(d=f/2);for(var g=0;d>g;g++){var h=parseInt(b.substr(2*g,2),16);if(isNaN(h))throw new Error("Invalid hex string");a[c+g]=h}return g}function v(a,b,c,d){return V(R(b,a.length-c),a,c,d)}function w(a,b,c,d){return V(S(b),a,c,d)}function x(a,b,c,d){return w(a,b,c,d)}function y(a,b,c,d){return V(U(b),a,c,d)}function z(a,b,c,d){return V(T(b,a.length-c),a,c,d)}function A(a,b,c){return 0===b&&c===a.length?W.fromByteArray(a):W.fromByteArray(a.slice(b,c))}function B(a,b,c){c=Math.min(a.length,c);for(var d=[],e=b;c>e;){var f=a[e],g=null,h=f>239?4:f>223?3:f>191?2:1;if(c>=e+h){var i,j,k,l;switch(h){case 1:128>f&&(g=f);break;case 2:i=a[e+1],128===(192&i)&&(l=(31&f)<<6|63&i,l>127&&(g=l));break;case 3:i=a[e+1],j=a[e+2],128===(192&i)&&128===(192&j)&&(l=(15&f)<<12|(63&i)<<6|63&j,l>2047&&(55296>l||l>57343)&&(g=l));break;case 4:i=a[e+1],j=a[e+2],k=a[e+3],128===(192&i)&&128===(192&j)&&128===(192&k)&&(l=(15&f)<<18|(63&i)<<12|(63&j)<<6|63&k,l>65535&&1114112>l&&(g=l))}}null===g?(g=65533,h=1):g>65535&&(g-=65536,d.push(g>>>10&1023|55296),g=56320|1023&g),d.push(g),e+=h}return C(d)}function C(a){var b=a.length;if($>=b)return String.fromCharCode.apply(String,a);for(var c="",d=0;b>d;)c+=String.fromCharCode.apply(String,a.slice(d,d+=$));return c}function D(a,b,c){var d="";c=Math.min(a.length,c);for(var e=b;c>e;e++)d+=String.fromCharCode(127&a[e]);return d}function E(a,b,c){var d="";c=Math.min(a.length,c);for(var e=b;c>e;e++)d+=String.fromCharCode(a[e]);return d}function F(a,b,c){var d=a.length;(!b||0>b)&&(b=0),(!c||0>c||c>d)&&(c=d);for(var e="",f=b;c>f;f++)e+=Q(a[f]);return e}function G(a,b,c){for(var d=a.slice(b,c),e="",f=0;f<d.length;f+=2)e+=String.fromCharCode(d[f]+256*d[f+1]);return e}function H(a,b,c){if(a%1!==0||0>a)throw new RangeError("offset is not uint");if(a+b>c)throw new RangeError("Trying to access beyond buffer length")}function I(a,b,c,d,e,g){if(!f.isBuffer(a))throw new TypeError("buffer must be a Buffer instance");if(b>e||g>b)throw new RangeError("value is out of bounds");if(c+d>a.length)throw new RangeError("index out of range")}function J(a,b,c,d){0>b&&(b=65535+b+1);for(var e=0,f=Math.min(a.length-c,2);f>e;e++)a[c+e]=(b&255<<8*(d?e:1-e))>>>8*(d?e:1-e)}function K(a,b,c,d){0>b&&(b=4294967295+b+1);for(var e=0,f=Math.min(a.length-c,4);f>e;e++)a[c+e]=b>>>8*(d?e:3-e)&255}function L(a,b,c,d,e,f){if(b>e||f>b)throw new RangeError("value is out of bounds");if(c+d>a.length)throw new RangeError("index out of range");if(0>c)throw new RangeError("index out of range")}function M(a,b,c,d,e){return e||L(a,b,c,4,3.4028234663852886e38,-3.4028234663852886e38),X.write(a,b,c,d,23,4),c+4}function N(a,b,c,d,e){return e||L(a,b,c,8,1.7976931348623157e308,-1.7976931348623157e308),X.write(a,b,c,d,52,8),c+8}function O(a){if(a=P(a).replace(aa,""),a.length<2)return"";for(;a.length%4!==0;)a+="=";return a}function P(a){return a.trim?a.trim():a.replace(/^\s+|\s+$/g,"")}function Q(a){return 16>a?"0"+a.toString(16):a.toString(16)}function R(a,b){b=b||1/0;for(var c,d=a.length,e=null,f=[],g=0;d>g;g++){if(c=a.charCodeAt(g),c>55295&&57344>c){if(!e){if(c>56319){(b-=3)>-1&&f.push(239,191,189);continue}if(g+1===d){(b-=3)>-1&&f.push(239,191,189);continue}e=c;continue}if(56320>c){(b-=3)>-1&&f.push(239,191,189),e=c;continue}c=(e-55296<<10|c-56320)+65536}else e&&(b-=3)>-1&&f.push(239,191,189);if(e=null,128>c){if((b-=1)<0)break;f.push(c)}else if(2048>c){if((b-=2)<0)break;f.push(c>>6|192,63&c|128)}else if(65536>c){if((b-=3)<0)break;f.push(c>>12|224,c>>6&63|128,63&c|128)}else{if(!(1114112>c))throw new Error("Invalid code point");if((b-=4)<0)break;f.push(c>>18|240,c>>12&63|128,c>>6&63|128,63&c|128)}}return f}function S(a){for(var b=[],c=0;c<a.length;c++)b.push(255&a.charCodeAt(c));return b}function T(a,b){for(var c,d,e,f=[],g=0;g<a.length&&!((b-=2)<0);g++)c=a.charCodeAt(g),d=c>>8,e=c%256,f.push(e),f.push(d);return f}function U(a){return W.toByteArray(O(a))}function V(a,b,c,d){for(var e=0;d>e&&!(e+c>=b.length||e>=a.length);e++)b[e+c]=a[e];return e}var W=a("base64-js"),X=a("ieee754"),Y=a("is-array");c.Buffer=f,c.SlowBuffer=r,c.INSPECT_MAX_BYTES=50,f.poolSize=8192;var Z={};f.TYPED_ARRAY_SUPPORT=void 0!==b.TYPED_ARRAY_SUPPORT?b.TYPED_ARRAY_SUPPORT:d(),f.TYPED_ARRAY_SUPPORT&&(f.prototype.__proto__=Uint8Array.prototype,f.__proto__=Uint8Array),f.isBuffer=function(a){return!(null==a||!a._isBuffer)},f.compare=function(a,b){if(!f.isBuffer(a)||!f.isBuffer(b))throw new TypeError("Arguments must be Buffers");if(a===b)return 0;for(var c=a.length,d=b.length,e=0,g=Math.min(c,d);g>e&&a[e]===b[e];)++e;return e!==g&&(c=a[e],d=b[e]),d>c?-1:c>d?1:0},f.isEncoding=function(a){switch(String(a).toLowerCase()){case"hex":case"utf8":case"utf-8":case"ascii":case"binary":case"base64":case"raw":case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return!0;default:return!1}},f.concat=function(a,b){if(!Y(a))throw new TypeError("list argument must be an Array of Buffers.");if(0===a.length)return new f(0);var c;if(void 0===b)for(b=0,c=0;c<a.length;c++)b+=a[c].length;var d=new f(b),e=0;for(c=0;c<a.length;c++){var g=a[c];g.copy(d,e),e+=g.length}return d},f.byteLength=s,f.prototype.length=void 0,f.prototype.parent=void 0,f.prototype.toString=function(){var a=0|this.length;return 0===a?"":0===arguments.length?B(this,0,a):t.apply(this,arguments)},f.prototype.equals=function(a){if(!f.isBuffer(a))throw new TypeError("Argument must be a Buffer");return this===a?!0:0===f.compare(this,a)},f.prototype.inspect=function(){var a="",b=c.INSPECT_MAX_BYTES;return this.length>0&&(a=this.toString("hex",0,b).match(/.{2}/g).join(" "),this.length>b&&(a+=" ... ")),"<Buffer "+a+">"},f.prototype.compare=function(a){if(!f.isBuffer(a))throw new TypeError("Argument must be a Buffer");return this===a?0:f.compare(this,a)},f.prototype.indexOf=function(a,b){function c(a,b,c){for(var d=-1,e=0;c+e<a.length;e++)if(a[c+e]===b[-1===d?0:e-d]){if(-1===d&&(d=e),e-d+1===b.length)return c+d}else d=-1;return-1}if(b>2147483647?b=2147483647:-2147483648>b&&(b=-2147483648),b>>=0,0===this.length)return-1;if(b>=this.length)return-1;if(0>b&&(b=Math.max(this.length+b,0)),"string"==typeof a)return 0===a.length?-1:String.prototype.indexOf.call(this,a,b);if(f.isBuffer(a))return c(this,a,b);if("number"==typeof a)return f.TYPED_ARRAY_SUPPORT&&"function"===Uint8Array.prototype.indexOf?Uint8Array.prototype.indexOf.call(this,a,b):c(this,[a],b);throw new TypeError("val must be string, number or Buffer")},f.prototype.get=function(a){return console.log(".get() is deprecated. Access using array indexes instead."),this.readUInt8(a)},f.prototype.set=function(a,b){return console.log(".set() is deprecated. Access using array indexes instead."),this.writeUInt8(a,b)},f.prototype.write=function(a,b,c,d){if(void 0===b)d="utf8",c=this.length,b=0;else if(void 0===c&&"string"==typeof b)d=b,c=this.length,b=0;else if(isFinite(b))b=0|b,isFinite(c)?(c=0|c,void 0===d&&(d="utf8")):(d=c,c=void 0);else{var e=d;d=b,b=0|c,c=e}var f=this.length-b;if((void 0===c||c>f)&&(c=f),a.length>0&&(0>c||0>b)||b>this.length)throw new RangeError("attempt to write outside buffer bounds");d||(d="utf8");for(var g=!1;;)switch(d){case"hex":return u(this,a,b,c);case"utf8":case"utf-8":return v(this,a,b,c);case"ascii":return w(this,a,b,c);case"binary":return x(this,a,b,c);case"base64":return y(this,a,b,c);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return z(this,a,b,c);default:if(g)throw new TypeError("Unknown encoding: "+d);d=(""+d).toLowerCase(),g=!0}},f.prototype.toJSON=function(){return{type:"Buffer",data:Array.prototype.slice.call(this._arr||this,0)}};var $=4096;f.prototype.slice=function(a,b){var c=this.length;a=~~a,b=void 0===b?c:~~b,0>a?(a+=c,0>a&&(a=0)):a>c&&(a=c),0>b?(b+=c,0>b&&(b=0)):b>c&&(b=c),a>b&&(b=a);var d;if(f.TYPED_ARRAY_SUPPORT)d=f._augment(this.subarray(a,b));else{var e=b-a;d=new f(e,void 0);for(var g=0;e>g;g++)d[g]=this[g+a]}return d.length&&(d.parent=this.parent||this),d},f.prototype.readUIntLE=function(a,b,c){a=0|a,b=0|b,c||H(a,b,this.length);for(var d=this[a],e=1,f=0;++f<b&&(e*=256);)d+=this[a+f]*e;return d},f.prototype.readUIntBE=function(a,b,c){a=0|a,b=0|b,c||H(a,b,this.length);for(var d=this[a+--b],e=1;b>0&&(e*=256);)d+=this[a+--b]*e;return d},f.prototype.readUInt8=function(a,b){return b||H(a,1,this.length),this[a]},f.prototype.readUInt16LE=function(a,b){return b||H(a,2,this.length),this[a]|this[a+1]<<8},f.prototype.readUInt16BE=function(a,b){return b||H(a,2,this.length),this[a]<<8|this[a+1]},f.prototype.readUInt32LE=function(a,b){return b||H(a,4,this.length),(this[a]|this[a+1]<<8|this[a+2]<<16)[phone]*this[a+3]},f.prototype.readUInt32BE=function(a,b){return b||H(a,4,this.length),16777216*this[a]+(this[a+1]<<16|this[a+2]<<8|this[a+3])},f.prototype.readIntLE=function(a,b,c){a=0|a,b=0|b,c||H(a,b,this.length);for(var d=this[a],e=1,f=0;++f<b&&(e*=256);)d+=this[a+f]*e;return e*=128,d>=e&&(d-=Math.pow(2,8*b)),d},f.prototype.readIntBE=function(a,b,c){a=0|a,b=0|b,c||H(a,b,this.length);for(var d=b,e=1,f=this[a+--d];d>0&&(e*=256);)f+=this[a+--d]*e;return e*=128,f>=e&&(f-=Math.pow(2,8*b)),f},f.prototype.readInt8=function(a,b){return b||H(a,1,this.length),128&this[a]?-1*(255-this[a]+1):this[a]},f.prototype.readInt16LE=function(a,b){b||H(a,2,this.length);var c=this[a]|this[a+1]<<8;return 32768&c?4294901760|c:c},f.prototype.readInt16BE=function(a,b){b||H(a,2,this.length);var c=this[a+1]|this[a]<<8;return 32768&c?4294901760|c:c},f.prototype.readInt32LE=function(a,b){return b||H(a,4,this.length),this[a]|this[a+1]<<8|this[a+2]<<16|this[a+3]<<24},f.prototype.readInt32BE=function(a,b){return b||H(a,4,this.length),this[a]<<24|this[a+1]<<16|this[a+2]<<8|this[a+3]},f.prototype.readFloatLE=function(a,b){return b||H(a,4,this.length),X.read(this,a,!0,23,4)},f.prototype.readFloatBE=function(a,b){return b||H(a,4,this.length),X.read(this,a,!1,23,4)},f.prototype.readDoubleLE=function(a,b){return b||H(a,8,this.length),X.read(this,a,!0,52,8)},f.prototype.readDoubleBE=function(a,b){return b||H(a,8,this.length),X.read(this,a,!1,52,8)},f.prototype.writeUIntLE=function(a,b,c,d){a=+a,b=0|b,c=0|c,d||I(this,a,b,c,Math.pow(2,8*c),0);var e=1,f=0;for(this[b]=255&a;++f<c&&(e*=256);)this[b+f]=a/e&255;return b+c},f.prototype.writeUIntBE=function(a,b,c,d){a=+a,b=0|b,c=0|c,d||I(this,a,b,c,Math.pow(2,8*c),0);var e=c-1,f=1;for(this[b+e]=255&a;--e>=0&&(f*=256);)this[b+e]=a/f&255;return b+c},f.prototype.writeUInt8=function(a,b,c){return a=+a,b=0|b,c||I(this,a,b,1,255,0),f.TYPED_ARRAY_SUPPORT||(a=Math.floor(a)),this[b]=255&a,b+1},f.prototype.writeUInt16LE=function(a,b,c){return a=+a,b=0|b,c||I(this,a,b,2,65535,0),f.TYPED_ARRAY_SUPPORT?(this[b]=255&a,this[b+1]=a>>>8):J(this,a,b,!0),b+2},f.prototype.writeUInt16BE=function(a,b,c){return a=+a,b=0|b,c||I(this,a,b,2,65535,0),f.TYPED_ARRAY_SUPPORT?(this[b]=a>>>8,this[b+1]=255&a):J(this,a,b,!1),b+2},f.prototype.writeUInt32LE=function(a,b,c){return a=+a,b=0|b,c||I(this,a,b,4,4294967295,0),f.TYPED_ARRAY_SUPPORT?(this[b+3]=a>>>24,this[b+2]=a>>>16,this[b+1]=a>>>8,this[b]=255&a):K(this,a,b,!0),b+4},f.prototype.writeUInt32BE=function(a,b,c){return a=+a,b=0|b,c||I(this,a,b,4,4294967295,0),f.TYPED_ARRAY_SUPPORT?(this[b]=a>>>24,this[b+1]=a>>>16,this[b+2]=a>>>8,this[b+3]=255&a):K(this,a,b,!1),b+4},f.prototype.writeIntLE=function(a,b,c,d){if(a=+a,b=0|b,!d){var e=Math.pow(2,8*c-1);I(this,a,b,c,e-1,-e)}var f=0,g=1,h=0>a?1:0;for(this[b]=255&a;++f<c&&(g*=256);)this[b+f]=(a/g>>0)-h&255;return b+c},f.prototype.writeIntBE=function(a,b,c,d){if(a=+a,b=0|b,!d){var e=Math.pow(2,8*c-1);I(this,a,b,c,e-1,-e)}var f=c-1,g=1,h=0>a?1:0;for(this[b+f]=255&a;--f>=0&&(g*=256);)this[b+f]=(a/g>>0)-h&255;return b+c},f.prototype.writeInt8=function(a,b,c){return a=+a,b=0|b,c||I(this,a,b,1,127,-128),f.TYPED_ARRAY_SUPPORT||(a=Math.floor(a)),0>a&&(a=255+a+1),this[b]=255&a,b+1},f.prototype.writeInt16LE=function(a,b,c){return a=+a,b=0|b,c||I(this,a,b,2,32767,-32768),f.TYPED_ARRAY_SUPPORT?(this[b]=255&a,this[b+1]=a>>>8):J(this,a,b,!0),b+2},f.prototype.writeInt16BE=function(a,b,c){return a=+a,b=0|b,c||I(this,a,b,2,32767,-32768),f.TYPED_ARRAY_SUPPORT?(this[b]=a>>>8,this[b+1]=255&a):J(this,a,b,!1),b+2},f.prototype.writeInt32LE=function(a,b,c){return a=+a,b=0|b,c||I(this,a,b,4,2147483647,-2147483648),f.TYPED_ARRAY_SUPPORT?(this[b]=255&a,this[b+1]=a>>>8,this[b+2]=a>>>16,this[b+3]=a>>>24):K(this,a,b,!0),b+4},f.prototype.writeInt32BE=function(a,b,c){return a=+a,b=0|b,c||I(this,a,b,4,2147483647,-2147483648),0>a&&(a=4294967295+a+1),f.TYPED_ARRAY_SUPPORT?(this[b]=a>>>24,this[b+1]=a>>>16,this[b+2]=a>>>8,this[b+3]=255&a):K(this,a,b,!1),b+4},f.prototype.writeFloatLE=function(a,b,c){return M(this,a,b,!0,c)},f.prototype.writeFloatBE=function(a,b,c){return M(this,a,b,!1,c)},f.prototype.writeDoubleLE=function(a,b,c){return N(this,a,b,!0,c)},f.prototype.writeDoubleBE=function(a,b,c){return N(this,a,b,!1,c)},f.prototype.copy=function(a,b,c,d){if(c||(c=0),d||0===d||(d=this.length),b>=a.length&&(b=a.length),b||(b=0),d>0&&c>d&&(d=c),d===c)return 0;if(0===a.length||0===this.length)return 0;if(0>b)throw new RangeError("targetStart out of bounds");if(0>c||c>=this.length)throw new RangeError("sourceStart out of bounds");if(0>d)throw new RangeError("sourceEnd out of bounds");d>this.length&&(d=this.length),a.length-b<d-c&&(d=a.length-b+c);var e,g=d-c;if(this===a&&b>c&&d>b)for(e=g-1;e>=0;e--)a[e+b]=this[e+c];else if(1e3>g||!f.TYPED_ARRAY_SUPPORT)for(e=0;g>e;e++)a[e+b]=this[e+c];else a._set(this.subarray(c,c+g),b);return g},f.prototype.fill=function(a,b,c){if(a||(a=0),b||(b=0),c||(c=this.length),b>c)throw new RangeError("end < start");if(c!==b&&0!==this.length){if(0>b||b>=this.length)throw new RangeError("start out of bounds");if(0>c||c>this.length)throw new RangeError("end out of bounds");var d;if("number"==typeof a)for(d=b;c>d;d++)this[d]=a;else{var e=R(a.toString()),f=e.length;for(d=b;c>d;d++)this[d]=e[d%f]}return this}},f.prototype.toArrayBuffer=function(){if("undefined"!=typeof Uint8Array){if(f.TYPED_ARRAY_SUPPORT)return new f(this).buffer;for(var a=new Uint8Array(this.length),b=0,c=a.length;c>b;b+=1)a[b]=this[b];return a.buffer}throw new TypeError("Buffer.toArrayBuffer not supported in this browser")};var _=f.prototype;f._augment=function(a){return a.constructor=f,a._isBuffer=!0,a._set=a.set,a.get=_.get,a.set=_.set,a.write=_.write,a.toString=_.toString,a.toLocaleString=_.toString,a.toJSON=_.toJSON,a.equals=_.equals,a.compare=_.compare,a.indexOf=_.indexOf,a.copy=_.copy,a.slice=_.slice,a.readUIntLE=_.readUIntLE,a.readUIntBE=_.readUIntBE,a.readUInt8=_.readUInt8,a.readUInt16LE=_.readUInt16LE,a.readUInt16BE=_.readUInt16BE,a.readUInt32LE=_.readUInt32LE,a.readUInt32BE=_.readUInt32BE,a.readIntLE=_.readIntLE,a.readIntBE=_.readIntBE,a.readInt8=_.readInt8,a.readInt16LE=_.readInt16LE,a.readInt16BE=_.readInt16BE,a.readInt32LE=_.readInt32LE,a.readInt32BE=_.readInt32BE,a.readFloatLE=_.readFloatLE,a.readFloatBE=_.readFloatBE,a.readDoubleLE=_.readDoubleLE,a.readDoubleBE=_.readDoubleBE,a.writeUInt8=_.writeUInt8,a.writeUIntLE=_.writeUIntLE,a.writeUIntBE=_.writeUIntBE,a.writeUInt16LE=_.writeUInt16LE,a.writeUInt16BE=_.writeUInt16BE,a.writeUInt32LE=_.writeUInt32LE,a.writeUInt32BE=_.writeUInt32BE,a.writeIntLE=_.writeIntLE,a.writeIntBE=_.writeIntBE,a.writeInt8=_.writeInt8,a.writeInt16LE=_.writeInt16LE,a.writeInt16BE=_.writeInt16BE,a.writeInt32LE=_.writeInt32LE,a.writeInt32BE=_.writeInt32BE,a.writeFloatLE=_.writeFloatLE,a.writeFloatBE=_.writeFloatBE,a.writeDoubleLE=_.writeDoubleLE,a.writeDoubleBE=_.writeDoubleBE,a.fill=_.fill,a.inspect=_.inspect,a.toArrayBuffer=_.toArrayBuffer,a};var aa=/[^+\/0-9A-Za-z-_]/g}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"base64-js":5,ieee754:6,"is-array":7}],5:[function(a,b,c){var d="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";!function(a){"use strict";function b(a){var b=a.charCodeAt(0);return b===g||b===l?62:b===h||b===m?63:i>b?-1:i+10>b?b-i+26+26:k+26>b?b-k:j+26>b?b-j+26:void 0}function c(a){function c(a){j[l++]=a}var d,e,g,h,i,j;if(a.length%4>0)throw new Error("Invalid string. Length must be a multiple of 4");var k=a.length;i="="===a.charAt(k-2)?2:"="===a.charAt(k-1)?1:0,j=new f(3*a.length/4-i),g=i>0?a.length-4:a.length;var l=0;for(d=0,e=0;g>d;d+=4,e+=3)h=b(a.charAt(d))<<18|b(a.charAt(d+1))<<12|b(a.charAt(d+2))<<6|b(a.charAt(d+3)),c((16711680&h)>>16),c((65280&h)>>8),c(255&h);return 2===i?(h=b(a.charAt(d))<<2|b(a.charAt(d+1))>>4,c(255&h)):1===i&&(h=b(a.charAt(d))<<10|b(a.charAt(d+1))<<4|b(a.charAt(d+2))>>2,c(h>>8&255),c(255&h)),j}function e(a){function b(a){return d.charAt(a)}function c(a){return b(a>>18&63)+b(a>>12&63)+b(a>>6&63)+b(63&a)}var e,f,g,h=a.length%3,i="";for(e=0,g=a.length-h;g>e;e+=3)f=(a[e]<<16)+(a[e+1]<<8)+a[e+2],i+=c(f);switch(h){case 1:f=a[a.length-1],i+=b(f>>2),i+=b(f<<4&63),i+="==";break;case 2:f=(a[a.length-2]<<8)+a[a.length-1],i+=b(f>>10),i+=b(f>>4&63),i+=b(f<<2&63),i+="="}return i}var f="undefined"!=typeof Uint8Array?Uint8Array:Array,g="+".charCodeAt(0),h="/".charCodeAt(0),i="0".charCodeAt(0),j="a".charCodeAt(0),k="A".charCodeAt(0),l="-".charCodeAt(0),m="_".charCodeAt(0);a.toByteArray=c,a.fromByteArray=e}("undefined"==typeof c?this.base64js={}:c)},{}],6:[function(a,b,c){c.read=function(a,b,c,d,e){var f,g,h=8*e-d-1,i=(1<<h)-1,j=i>>1,k=-7,l=c?e-1:0,m=c?-1:1,n=a[b+l];for(l+=m,f=n&(1<<-k)-1,n>>=-k,k+=h;k>0;f=256*f+a[b+l],l+=m,k-=8);for(g=f&(1<<-k)-1,f>>=-k,k+=d;k>0;g=256*g+a[b+l],l+=m,k-=8);if(0===f)f=1-j;else{if(f===i)return g?NaN:(n?-1:1)*(1/0);g+=Math.pow(2,d),f-=j}return(n?-1:1)*g*Math.pow(2,f-d)},c.write=function(a,b,c,d,e,f){var g,h,i,j=8*f-e-1,k=(1<<j)-1,l=k>>1,m=23===e?Math.pow(2,-24)-Math.pow(2,-77):0,n=d?0:f-1,o=d?1:-1,p=0>b||0===b&&0>1/b?1:0;for(b=Math.abs(b),isNaN(b)||b===1/0?(h=isNaN(b)?1:0,g=k):(g=Math.floor(Math.log(b)/Math.LN2),b*(i=Math.pow(2,-g))<1&&(g--,i*=2),b+=g+l>=1?m/i:m*Math.pow(2,1-l),b*i>=2&&(g++,i/=2),g+l>=k?(h=0,g=k):g+l>=1?(h=(b*i-1)*Math.pow(2,e),g+=l):(h=b*Math.pow(2,l-1)*Math.pow(2,e),g=0));e>=8;a[c+n]=255&h,n+=o,h/=256,e-=8);for(g=g<<e|h,j+=e;j>0;a[c+n]=255&g,n+=o,g/=256,j-=8);a[c+n-o]|=128*p}},{}],7:[function(a,b,c){var d=Array.isArray,e=Object.prototype.toString;b.exports=d||function(a){return!!a&&"[object Array]"==e.call(a)}},{}],8:[function(a,b,c){function d(){k=!1,h.length?j=h.concat(j):l=-1,j.length&&e()}function e(){if(!k){var a=setTimeout(d);k=!0;for(var b=j.length;b;){for(h=j,j=[];++l<b;)h&&h[l].run();l=-1,b=j.length}h=null,k=!1,clearTimeout(a)}}function f(a,b){this.fun=a,this.array=b}function g(){}var h,i=b.exports={},j=[],k=!1,l=-1;i.nextTick=function(a){var b=new Array(arguments.length-1);if(arguments.length>1)for(var c=1;c<arguments.length;c++)b[c-1]=arguments[c];j.push(new f(a,b)),1!==j.length||k||setTimeout(e,0)},f.prototype.run=function(){this.fun.apply(null,this.array)},i.title="browser",i.browser=!0,i.env={},i.argv=[],i.version="",i.versions={},i.on=g,i.addListener=g,i.once=g,i.off=g,i.removeListener=g,i.removeAllListeners=g,i.emit=g,i.binding=function(a){throw new Error("process.binding is not supported")},i.cwd=function(){return"/"},i.chdir=function(a){throw new Error("process.chdir is not supported")},i.umask=function(){return 0}},{}]},{},[1]);
+!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){(function(c){function d(a){return a=a||{},this.originalOptions=a,this.maxQualityLevel=a.maxQualityLevel||92,this.minQualityLevel=a.minQualityLevel||1,this.qualityLevel=a.quality||this.maxQualityLevel,this.quality(this.qualityLevel),this}function e(a){for(var b=["imageFormat","maxQualityLevel","minQualityLevel"],c=0,d=b.length;d>c;c++){var e=b[c];!function(b){a.prototype["set"+f.upperCaseFirstLetter(b)]=function(a){this[b]=a}}(e)}}var f=(a("fs"),a("./utils")),g=a("./polyfills"),h=f.isElectron(),i=f.isNW(),j=f.isBrowser(),k=j||h||i;d.prototype.loadImageFromMemory=function(a){a=a||this.originalImage;var b=a.width,c=a.height,d=this.__createCanvas(b,c),e=d.getContext("2d");return e.drawImage(a,0,0,b,c),this.canvas=d,this.imageFormat=this.imageFormat||f.getImageFormat(a.src)||"image/jpeg",this.originalImage||(this.originalImage=a),this},d.prototype.loadImageFromUrl=function(a,b){var c=this,d=this.__createImage();this.imageFormat=f.getImageFormat(a)||"image/jpeg",d.onload=function(){c.loadImageFromMemory(d),b.call(c)},d.src=a},d.prototype.crop=function(a,b,c,d){var e=this.canvas,f=e.getContext("2d"),g=f.getImageData(a,b,c,d),h=this.__createCanvas(c,d),i=h.getContext("2d");return i.rect(0,0,c,d),i.fillStyle="white",i.fill(),i.putImageData(g,0,0),this.canvas=h,this},d.prototype.toFile=function(a,b){var c=this,d=c.imageFormat;return this.toDataURL(function(e){j?b.call(c,e):this.dataUrlToFile(a,e,d,function(){b.call(c)})}),this},d.prototype.dataUrlToFile=function(a,b,d,e){var f=this,h=b.replace("data:"+d+";base64,",""),i=new c(h,"base64");g.writeFile(a,i,function(){e.call(f)})},d.prototype.resize=function(a,b){var c,d,e=this.canvas;if(!arguments.length)throw new Error("resize() must be specified at least one parameter");if(1===arguments.length){if(!a)throw new Error("resize() inappropriate parameter");c=a/e.width,b=e.height*c}else!a&&b&&(d=b/e.height,a=e.width*d);var f=this.__createCanvas(a,b),g=f.getContext("2d");return g.drawImage(e,0,0,a,b),this.canvas=f,this},d.prototype.clear=function(a,b,c,d){var e=this.canvas,f=e.getContext("2d");return f.clearRect(a,b,c,d),f.fillStyle="#fff",f.fillRect(a,b,c,d),this},d.prototype.quality=function(a){return a=parseFloat(a),a=f.rangeNumber(a,this.minQualityLevel,this.maxQualityLevel),this.qualityLevel=a,this},d.prototype.toDataURL=function(a,b){var c=this;"string"==typeof a&&(a=parseFloat(a)),0==arguments.length?a=this.qualityLevel:1==arguments.length?"number"==typeof a?a=f.rangeNumber(a,this.minQualityLevel,this.maxQualityLevel):"function"==typeof a&&(b=a,a=this.qualityLevel):2==arguments.length&&(a=f.rangeNumber(a,this.minQualityLevel,this.maxQualityLevel));var d=this.canvas,e=this.imageFormat;if(k){var h=d.toDataURL(e,a);return b&&b.call(c,h),h}if(!b)throw new Error("toDataURL(): callback must be specified");return g.toDataURL({canvas:d,imageFormat:e,quality:a,bufsize:this.originalOptions.bufsize||4096},function(a){b.call(c,a)}),this},d.prototype.getCanvas=function(){return this.canvas},d.prototype.destroy=function(){return this.canvas=null,this},d.prototype.reset=function(){return this.destroy().loadImageFromMemory()},d.prototype.injectNodeCanvas=function(a){this.originalOptions.canvas=a},d.prototype.__createCanvas=function(a,b){var c,d;if(k){var e=window.document;d=e.createElement("canvas"),d.width=a,d.height=b}else{if(c=this.originalOptions.canvas,!c||!c.Image)throw new Error("Require node-canvas on the server-side Node.js");d=new c(a,b)}return d},d.prototype.__createImage=function(){var a,b,c;if(k)a=window.Image;else{if(c=this.originalOptions.canvas,!c||!c.Image)throw new Error("Require node-canvas on the server-side Node.js");a=c.Image}return b=new a},e(d),"function"==typeof define&&define.amd?define(function(){return d}):"undefined"!=typeof window&&(window.ImageClipper=d),b.exports=d}).call(this,a("buffer").Buffer)},{"./polyfills":2,"./utils":3,buffer:4,fs:4}],2:[function(a,b,c){var d=a("fs"),e=a("./utils"),f={},g=e.isElectron(),h=e.isNW(),i=e.isBrowser(),j=i||g||h;f.writeFile=function(a,b,c){d.writeFile(a,b,function(a){if(a)throw a;c()})},f.toDataURL=function(a,b){var c=a.canvas,d=a.imageFormat,e=a.quality,f=a.bufsize;if(j){var g=c.toDataURL(d,e/100);b(g)}else"image/jpeg"===d?c.toDataURL(d,{quality:e,bufsize:f},function(a,c){if(a)throw a;b(c)}):c.toDataURL(d,function(a,c){if(a)throw a;b(c)})},b.exports=f},{"./utils":3,fs:4}],3:[function(a,b,c){(function(a,c){var d={};d.upperCaseFirstLetter=function(a){return a.replace(a.charAt(0),function(a){return a.toUpperCase()})},d.getImageFormat=function(a){var b=a.substr(a.lastIndexOf(".")+1,a.length);return b="jpg"===b?"jpeg":b,"image/"+b},d.isBrowser=function(){var a=d.isElectron(),b=d.isNW();return!a&&!b&&!("undefined"==typeof window||"undefined"==typeof navigator)},d.isNode=function(){return!("undefined"==typeof a||!a.platform||!a.versions)},d.isNW=function(){var a=d.isNode();return a&&!("undefined"==typeof c||!c.gui||!c.gui.Menu)},d.isElectron=function(){var b=d.isNode();return b&&!("undefined"==typeof c||!a.versions.electron)},d.rangeNumber=function(a,b,c){return a>c?c:b>a?b:a},b.exports=d}).call(this,a("_process"),"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{_process:5}],4:[function(a,b,c){},{}],5:[function(a,b,c){function d(){k=!1,h.length?j=h.concat(j):l=-1,j.length&&e()}function e(){if(!k){var a=setTimeout(d);k=!0;for(var b=j.length;b;){for(h=j,j=[];++l<b;)h&&h[l].run();l=-1,b=j.length}h=null,k=!1,clearTimeout(a)}}function f(a,b){this.fun=a,this.array=b}function g(){}var h,i=b.exports={},j=[],k=!1,l=-1;i.nextTick=function(a){var b=new Array(arguments.length-1);if(arguments.length>1)for(var c=1;c<arguments.length;c++)b[c-1]=arguments[c];j.push(new f(a,b)),1!==j.length||k||setTimeout(e,0)},f.prototype.run=function(){this.fun.apply(null,this.array)},i.title="browser",i.browser=!0,i.env={},i.argv=[],i.version="",i.versions={},i.on=g,i.addListener=g,i.once=g,i.off=g,i.removeListener=g,i.removeAllListeners=g,i.emit=g,i.binding=function(a){throw new Error("process.binding is not supported")},i.cwd=function(){return"/"},i.chdir=function(a){throw new Error("process.chdir is not supported")},i.umask=function(){return 0}},{}]},{},[1]);

Gruntfile.js

@@ -30,3 +30,4 @@
             options: {
-                banner: banner
+                banner: banner,
+                ignore: ['fs', 'buffer']
             },
@@ -33,0 +34,0 @@ main: {

lib/index.js

 var fs = require('fs');
 var utils = require('./utils');
+var polyfills = require('./polyfills');
 
-// Fix for NW.js, link document & Image to global
-var document = window.document;
-var Image = window.Image;
+// whether is Electron
+var isElectron = utils.isElectron();
 
+// whether is NW.js (Node-webkit)
+var isNW = utils.isNW();
+
+// pure Browser
+var isBrowser = utils.isBrowser();
+
+// whether support canvas
+var isSupportCanvas = isBrowser || isElectron || isNW;
+
 // constructor
@@ -12,5 +21,7 @@ function ImageClipper(options) {
 
-  this.maxQualityLevel = options.maxQualityLevel || 0.92;
-  this.minQualityLevel = options.minQualityLevel || 0.01;
+  this.originalOptions = options;
+  this.maxQualityLevel = options.maxQualityLevel || 92;
+  this.minQualityLevel = options.minQualityLevel || 1;
   this.qualityLevel = options.quality || this.maxQualityLevel;
+  this.quality(this.qualityLevel);
 
@@ -27,5 +38,2 @@ return this;
 ImageClipper.prototype.loadImageFromMemory = function(image) {
-  var canvas = document.createElement('canvas');
-  var ctx = canvas.getContext('2d');
-
   image = image || this.originalImage;
@@ -35,6 +43,5 @@
   var height = image.height;
-  var imageUrl = image.getAttribute('src');
 
-  canvas.width = width;
-  canvas.height = height;
+  var canvas = this.__createCanvas(width, height);
+  var ctx = canvas.getContext('2d');
 
@@ -44,3 +51,3 @@ ctx.drawImage(image, 0, 0, width, height);
   this.canvas = canvas;
-  this.imageFormat = this.imageFormat || utils.getImageFormat(imageUrl) || 'image/jpeg';
+  this.imageFormat = this.imageFormat || utils.getImageFormat(image.src) || 'image/jpeg';
 
@@ -62,4 +69,6 @@ if (!this.originalImage) {
   var self = this;
-  var image = new Image();
+  var image = this.__createImage();
 
+  this.imageFormat = utils.getImageFormat(url) || 'image/jpeg';
+
   image.onload = function() {
@@ -74,3 +83,3 @@ self.loadImageFromMemory(image);
 /**
- * crop canvas area and pass data url to callback
+ * Crops the resultant image to the given width and height at the given x and y position.
  *
@@ -81,15 +90,5 @@ * @param {Number} x, The x axis of the coordinate for the rectangle starting point
  * @param {Number} height, The rectangle's height
- * @param {Function} callback
- *    function(dataUrl)
- *    @param {String} dataUrl, data url of crop area
+ * @return ImageClipper instance
  * */
-ImageClipper.prototype.crop = function(x, y, width, height, callback) {
-  var dataUrl = this.getCropDataUrl(x, y, width, height);
-  callback.call(this, dataUrl);
-};
-
-ImageClipper.prototype.getCropDataUrl = function(x, y, width, height) {
-  var imageFormat = this.imageFormat;
-  var quality = this.qualityLevel;
-
+ImageClipper.prototype.crop = function(x, y, width, height) {
   var canvas = this.canvas;
@@ -102,8 +101,5 @@ var ctx = canvas.getContext('2d');
   // Create a temporary canvas to place cropped pixel data
-  var tempcanvas = document.createElement('canvas');
+  var tempcanvas = this.__createCanvas(width, height);
   var tempctx = tempcanvas.getContext('2d');
 
-  tempcanvas.width = width;
-  tempcanvas.height = height;
-
   tempctx.rect(0, 0, width, height);
@@ -114,56 +110,98 @@ tempctx.fillStyle = 'white';
 
-  var dataUrl = tempcanvas.toDataURL(imageFormat, quality);
+  // change context canvas
+  this.canvas = tempcanvas;
 
-  tempcanvas = tempctx = null;
-
-  return dataUrl;
+  return this;
 };
 
 /**
-* convert data url to binary image file
+* Write the resultant image to file.
 *
-* @param {String} path
-* @param {String} dataUrl, optional
-* @param {Function} callback
+* Note: in the Browser (not contain Electron & NW.js),
+* this method is equivalent to toDataURL, callback will still be executed.
+*
+* @param {String} the path where the resultant image will be saved
+* @param {Function} a function to be executed when saving is complete
 * */
-ImageClipper.prototype.toFile = function(path, dataUrl, callback) {
+ImageClipper.prototype.toFile = function(path, callback) {
+  var self = this;
+  var imageFormat = self.imageFormat;
 
-  if (arguments.length === 2) {
-    callback = dataUrl;
-    dataUrl = this.toDataUrl();
-  }
+  this.toDataURL(function(dataUrl) {
+    // return data url when using in browser
+    if (isBrowser) {
+      callback.call(self, dataUrl);
+    }
+    // Electron & NW.js & server Node.js
+    else {
+      this.dataUrlToFile(path, dataUrl, imageFormat, function() {
+        callback.call(self);
+      });
+    }
+  });
 
-  // return data url when using in browser
-  var isElectronOrNW = utils.isElectronOrNW();
-  if (!isElectronOrNW) {
-    callback.call(this, dataUrl);
-    return dataUrl;
-  }
+  return this;
+};
 
-  var imageFormat = this.imageFormat;
-  var imgbase64 = dataUrl.replace('data:'+ imageFormat +';base64,', '')
-      .replace('data:image/jpg;base64,', '');
+ImageClipper.prototype.dataUrlToFile = function(path, dataUrl, imageFormat, callback) {
+  var self = this;
+  var base64 = dataUrl.replace('data:'+ imageFormat +';base64,', '');
 
-  var dataBuffer = new Buffer(imgbase64, 'base64');
+  var dataBuffer = new Buffer(base64, 'base64');
 
-  // create image file
-  fs.writeFile(path, dataBuffer, function(err) {
-    if (err) {
-      return console.log(err);
+  // create image binary file
+  polyfills.writeFile(path, dataBuffer, function() {
+    callback.call(self);
+  });
+};
+
+/**
+ * Resize the resultant image to the given width and height
+ *
+ * @param {Number} width, Number of pixels wide
+ * @param {Number} height, Number of pixels high
+ * @return ImageClipper instance
+ * */
+ImageClipper.prototype.resize = function(width, height) {
+  var originalCanvas = this.canvas;
+  var scaleX, scaleY;
+
+  if (!arguments.length) throw new Error('resize() must be specified at least one parameter');
+
+  // proportional scale when resize(width)
+  if (arguments.length === 1) {
+    // resize(null)
+    if (!width) throw new Error('resize() inappropriate parameter');
+
+    scaleX = width / originalCanvas.width;
+    height = originalCanvas.height * scaleX;
+  } else {
+    // proportional scale when resize(null, height)
+    if (!width && height) {
+      scaleY = height / originalCanvas.height;
+      width = originalCanvas.width * scaleY;
     }
+  }
 
-    callback.call(this);
-  });
+  var canvas = this.__createCanvas(width, height);
+  var ctx = canvas.getContext('2d');
+
+  ctx.drawImage(originalCanvas, 0, 0, width, height);
+
+  // change context canvas
+  this.canvas = canvas;
+
+  return this;
 };
 
 /**
- * clear canvas area
+ * Removes rectangular pixels from the given width and height at the given x and y position.
  *
  * @param {Number} x, The x axis of the coordinate for the rectangle starting point
  * @param {Number} y, The y axis of the coordinate for the rectangle starting point
- * @param {Number} width, The rectangle's width
- * @param {Number} height, The rectangle's height
+ * @param {Number} width, Number of pixels wide will be removed
+ * @param {Number} height, Number of pixels high will be removed
  * @return ImageClipper instance
  * */
-ImageClipper.prototype.clearArea = function(x, y, width, height) {
+ImageClipper.prototype.clear = function(x, y, width, height) {
   var canvas = this.canvas;
@@ -184,3 +222,3 @@ // Get target canvas's context
 /**
- * set quality
+ * set quality level
  *
@@ -193,4 +231,4 @@ * @param {Number | String} level
 
-  // 0.01 ~ 0.92
-  level = level > 0.92 ? 0.92 : level < 0.01 ? 0.01 : level;
+  // this will always be between 'min' and 'max'
+  level = utils.rangeNumber(level, this.minQualityLevel, this.maxQualityLevel);
 
@@ -202,10 +240,61 @@ this.qualityLevel = level;
 
-// convert to data url
-ImageClipper.prototype.toDataUrl = function(quality) {
-  quality = quality || this.qualityLevel;
+/**
+ * Return a string containing the data URI of current resultant canvas.
+ *
+ * @param {Number} quality
+ * @param {Function} callback, optional in the Browser & Electron & NW.js, neccessary on the server Node.js
+ * @return ImageClipper instance
+ * */
+ImageClipper.prototype.toDataURL = function(quality, callback) {
+  var self = this;
 
+  // toDataURL('68', function() {...})
+  if (typeof quality === 'string') {
+    quality = parseFloat(quality);
+  }
+
+  // toDataURL()
+  if (arguments.length == 0) {
+    quality = this.qualityLevel;
+  }
+  else if (arguments.length == 1) {
+    // toDataURL(quality)
+    if (typeof quality === 'number') {
+      quality = utils.rangeNumber(quality, this.minQualityLevel, this.maxQualityLevel);
+    }
+    // toDataURL(callback)
+    else if (typeof quality === 'function') {
+      callback = quality;
+      quality = this.qualityLevel;
+    }
+  }
+  // toDataURL(quality, callback)
+  else if (arguments.length == 2) {
+    quality = utils.rangeNumber(quality, this.minQualityLevel, this.maxQualityLevel);
+  }
+
   var canvas = this.canvas;
   var imageFormat = this.imageFormat;
 
-  return canvas.toDataURL(imageFormat, quality);
+  // Browsers & Electron & NW.js
+  if (isSupportCanvas) {
+    var dataUrl = canvas.toDataURL(imageFormat, quality);
+    callback && callback.call(self, dataUrl);
+    return dataUrl;
+  }
+  // server Node.js
+  else {
+    if (!callback) throw new Error('toDataURL(): callback must be specified');
+
+    polyfills.toDataURL({
+      canvas: canvas,
+      imageFormat: imageFormat,
+      quality: quality,
+      bufsize: this.originalOptions.bufsize || 4096
+    }, function(dataUrl) {
+      callback.call(self, dataUrl);
+    });
+  }
+
+  return this;
 };
@@ -229,5 +318,53 @@
 
+// inject node-canvas
+ImageClipper.prototype.injectNodeCanvas = function(Canvas) {
+  this.originalOptions.canvas = Canvas;
+};
+
+// create Canvas object
+ImageClipper.prototype.__createCanvas = function(width, height) {
+  var canvas, c;
+
+  if (isSupportCanvas) {
+    var document = window.document;
+    c = document.createElement('canvas');
+    c.width = width;
+    c.height = height;
+  } else {
+    // Node.js
+    canvas = this.originalOptions.canvas;
+    if (canvas && canvas.Image) {
+      c = new canvas(width, height);
+    } else {
+      throw new Error('Require node-canvas on the server-side Node.js');
+    }
+  }
+
+  return c;
+};
+
+// create Image object
+ImageClipper.prototype.__createImage = function() {
+  var Image, img, canvas;
+
+  if (isSupportCanvas) {
+    Image = window.Image;
+  } else {
+    // Node.js
+    canvas = this.originalOptions.canvas;
+    if (canvas && canvas.Image) {
+      Image = canvas.Image;
+    } else {
+      throw new Error('Require node-canvas on the server-side Node.js');
+    }
+  }
+
+  img = new Image;
+
+  return img;
+};
+
 // initialize setter
 function initSetter(construct) {
-  var keys = ['imageFormat'];
+  var keys = ['imageFormat', 'maxQualityLevel', 'minQualityLevel'];
 
@@ -238,3 +375,3 @@ for (var i = 0, l = keys.length; i < l; i++) {
     (function(k) {
-      construct.prototype['set' + utils.upperCase(k)] = function(v) {
+      construct.prototype['set' + utils.upperCaseFirstLetter(k)] = function(v) {
         this[k] = v;
@@ -241,0 +378,0 @@ };

lib/utils.js

 
 var utils = {};
 
+// uppercase first letter
+utils.upperCaseFirstLetter = function(str) {
+  return str.replace(str.charAt(0), function(a) {
+    return a.toUpperCase();
+  });
+};
+
 // get image format
 utils.getImageFormat = function(str) {
   var format = str.substr(str.lastIndexOf('.') + 1, str.length);
-
-  // 震惊：image/jpg 切出来的图片文件比 image/jpeg 大将近 10 倍！
   format = format === 'jpg' ? 'jpeg' : format;
-
   return 'image/' + format;
 };
 
-// uppercase first
-utils.upperCase = function(str) {
-  return str.replace(str.charAt(0), function(a) {
-    return a.toUpperCase();
-  });
-};
-
 // whether is browser
 utils.isBrowser = function() {
-  return typeof window !== 'undefined' && typeof navigator !== 'undefined';
+  var isElectron = utils.isElectron();
+  var isNW = utils.isNW();
+  return !isElectron && !isNW && !(typeof window == 'undefined' || typeof navigator == 'undefined');
 };
 
-// whether support Image Object
-utils.supportImageObj = function() {
-  return typeof Image !== 'undefined';
+// whether is in Node
+utils.isNode = function() {
+  return !(typeof process == 'undefined' || !process.platform || !process.versions);
 };
 
-// whether is Electron or NW.js (Node-webkit)
-utils.isElectronOrNW = function() {
-  return typeof global !== 'undefined' &&
-      typeof process !== 'undefined' && typeof process.platform !== 'undefined';
+// whether is NW.js (Node-webkit)
+utils.isNW = function() {
+  var isNode = utils.isNode();
+  return isNode && !(typeof global == 'undefined' || !global.gui || !global.gui.Menu);
 };
 
 // whether is NW.js (Node-webkit)
-utils.isNW = function() {
-  return !!(typeof global !== 'undefined' && global.gui && global.gui.Menu);
+utils.isElectron = function() {
+  var isNode = utils.isNode();
+  return isNode && !(typeof global == 'undefined' || !process.versions.electron);
 };
 
+// return min ~ max number
+utils.rangeNumber = function(num, min, max) {
+  return num > max ? max : num < min ? min : num;
+};
+
 module.exports = utils;

package.json

 {
   "name": "image-clipper",
-  "version": "0.2.3",
-  "description": "Crop your images purely using the native Canvas APIs, for the Browser & Electron & NW.js (Node-webkit), without any image processing library dependencies.",
+  "version": "0.3.0",
+  "description": "Node.js module for clip & crop JPEG, PNG, WebP images purely using the native Canvas APIs, excellent compatibility with the Browser & Electron & NW.js (Node-webkit), itself doesn't relies on any image processing libraries.",
   "main": "lib/index.js",
@@ -25,3 +25,3 @@ "license": "MIT",
     "test": "./node_modules/.bin/mocha ./test/*.js",
-    "server": "./node_modules/http-server/bin/http-server ./ -p 9100"
+    "start": "./node_modules/http-server/bin/http-server ./ -p 9100"
   },
@@ -32,2 +32,3 @@ "devDependencies": {
     "http-server": "~0.8.5",
+    "canvas": "~1.3.5",
     "grunt": "~0.4.5",
@@ -34,0 +35,0 @@ "grunt-contrib-uglify": "~0.4",

README.md

 # image-clipper
-> Crop your images purely using the native Canvas APIs, for the Browser & [Electron](https://github.com/atom/electron/) & [NW.js](https://github.com/nwjs/nw.js) (Node-webkit), without any image processing library dependencies.
+> Node.js module for clip & crop JPEG, PNG, WebP images purely using the native Canvas APIs, excellent compatibility with the Browser & Electron & NW.js (Node-webkit), itself doesn't relies on any image processing libraries.
 
@@ -14,21 +14,2 @@ [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Bower version][bower-image]][bower-url]
 
-[Quick Start](#quick-start)
-
-[API Documentation](#api)
-
-## Why image-clipper?
-
-When we develop [Electron](https://github.com/atom/electron/) or [NW.js](https://github.com/nwjs/nw.js) application, I found it's very inconvenient when using image processing libraries such as [gm](https://github.com/aheckmann/gm) and [node-canvas](https://github.com/Automattic/node-canvas), when you publish your application, probably the first thing you have to do is to prompt your user to install multiple local dependencies, For example, `gm` relies [GraphicsMagick](http://www.graphicsmagick.org/), `node-canvas` relies [Cairo](http://cairographics.org/).
-
-However, i just need to use a very small part of `gm` functions provided, and do some simple image operations, such as crop, we should avoid users to install those cumbersome things that may frustrated your user, sometimes there is no need to install those!
-
-## When should you use image-clipper?
-
-Your application will running in the browser or Electron or NW.js, and you just want to do some simple image operations, then `image-clipper` may be what you want!
-
-`image-clipper` can make you avoid using the kind of large modules that depends client to install additional local dependencies. It use the native canvas APIs to crop your images.
-
-**Note: If your project is a purely Node.js project, please use the dedicated image processing library that provide more comprehensive functions, such as `gm` and `node-canvas`, because you can install anything on the server.**
-
-
 # Installation / Download
@@ -40,6 +21,3 @@
 
-### Electron & NW.js (Node-webkit)
-
 ```js
-var path = require('path');
 var ImageClipper = require('image-clipper');
@@ -52,19 +30,35 @@ var clipper = new ImageClipper();
 var height = 100;
-var outputFileName = path.join(exportPath, 'example-clipped.jpg');
 
-clipper.loadImageFromUrl('example.jpg', function() {
-    this.crop(x, y, width, height, function(dataUrl) {
-        this.toFile(outputFileName, dataUrl, function() {
-            console.log('saved!');
-        });
-    });
+clipper.loadImageFromUrl('/path/to/image.jpg', function() {
+    this.crop(x, y, width, height)
+    .resize(50, 50)
+    .toFile('/path/to/image-cropped.jpg', function() {
+       console.log('saved!');
+   });
 });
 ```
 
-### Browser
+[API Documentation](#api)
 
+## Differences between the server-side and the client-side on usage
+
+1. Since server-side Node.js doesn't natively support Canvas, so you must to specify a Canvas implementation library, such as [node-canvas](https://github.com/Automattic/node-canvas). [See usage]()
+2. `toFile()` not support to write the resultant image to file in the truly Browsers (not contain Electron & NW.js)
+
+## Benefits for Electron & NW.js application
+
+When we develop [Electron](https://github.com/atom/electron/) or [NW.js](https://github.com/nwjs/nw.js) application, I found it's very inconvenient while using image processing libraries such as [gm](https://github.com/aheckmann/gm) and [sharp](https://github.com/lovell/sharp), when you publish your application, probably the first thing you have to do is to tell your user to install multiple local dependencies, knew that `gm` relies on [GraphicsMagick](http://www.graphicsmagick.org/), `sharp` relies on [libvips](https://github.com/jcupitt/libvips).
+
+However, sometimes we just need to use a very small part of `gm` provided, and do some simple operations to image, use image-clipper to avoid your user to install those cumbersome things which may frustrated them.
+
+Electron & NW.js provide a mixture of Node.js and Browser, image-clipper just right using the Browser's native ability of Canvas and the Node's ability of File I/O, no longer needed the Canvas implementation libraries. Moreover, image-clipper use native Canvas APIs to process images, so there is no need to install any other image processing libraries too.
+
+Your desktop application will remain more stable and lightweight and your user will be peach of mind.
+
+## Basic usage in the truly Browser
+
 HTML:
 
 ```html
-<img src="" id="preview" alt="imageClipper preview">
+<img id="preview" alt="imageClipper preview">
 <script src="./dist/imageClipper.js"></script>
@@ -76,7 +70,7 @@ ```
 ```js
+var preview = document.getElementById('preview');
 var clipper = new ImageClipper();
-var preview = document.getElementById('preview');
-
-clipper.loadImageFromUrl('example.jpg', function() {
-    this.crop(x, y, width, height, function(dataUrl) {
+clipper.loadImageFromUrl('/path/to/image.jpg', function() {
+    this.crop(x, y, width, height)
+    .toDataURL(function(dataUrl) {
         console.log('cropped!');
@@ -88,6 +82,4 @@ preview.src = dataUrl;
 
-Or you can preview the demo using `npm run server` and open http://localhost:9100/example/browser.html
+### Supported browsers
 
-# Supported browsers
-
 See [caniuse.com/canvas](http://caniuse.com/canvas)
@@ -97,2 +89,4 @@
 
+You can see all possible usages of APIs in the [Test Suite (server-side Node.js)](test/server.test.js) and [Test Suite (client-side Browser & Electron & NW.js)](test/jasmine/browser.test.js), or [run them](#testing) to verify.
+
 ```js
@@ -105,13 +99,38 @@ var ImageClipper = require('image-clipper');
 
-Load image from url.
+Load image from the given url. callback will be executed when loading is complete.
 
-- **url:** url of the source image
-- **callback:** called when source image loaded.
+- **url:** the path where the source image
+- **callback:** function()
 
 > Note: in all callbacks, allow using `this` to call instance methods
 
-### clipper.crop(x, y, width, height, callback)
+### clipper.loadImageFromMemory(image)
 
-Crop rectangular area of canvas and pass data url to callback when done.
+Load image from the memory.
 
+- **image:** anything ctx.drawImage() accepts, usually HTMLImageElement, HTMLCanvasElement, HTMLVideoElement or [ImageBitmap](https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap). Keep in mind that [origin policies](https://en.wikipedia.org/wiki/Same-origin_policy) apply to the image source, and you may not use cross-domain images without [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing).
+
+`clipper.loadImageFromUrl` will eventually using this method to load image.
+
+Below is an example:
+
+```js
+clipper.loadImageFromMemory(image)
+    this.crop(x, y, width, height).toDataURL(function(dataUrl) {
+        console.log('cropped!');
+    });
+```
+
+In this case, the best practice is to place the code in `onload` callback:
+
+```js
+var image = new Image;
+image.onload(function(){ clipper.loadImageFromMemory(...) });
+image.src = '/path/to/image.jpg';
+```
+
+### clipper.crop(x, y, width, height)
+
+Crops the resultant image to the given width and height at the given x and y position.
+
 - **x:** the x axis of the coordinate for the rectangle starting point
@@ -121,65 +140,103 @@ - **y:** the y axis of the coordinate for the rectangle starting point
 - **height:** the rectangle's height
-- **callback:** function(dataUrl)
 
-### clipper.loadImageFromMemory(image)
+### clipper.toFile(path, callback)
 
-`clipper.loadImageFromUrl` will eventually using this method to crop image.
+Write the resultant image to file.
 
-- **image:** anything ctx.drawImage() accepts, usually HTMLImageElement, HTMLCanvasElement, HTMLVideoElement or [ImageBitmap](https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap). Keep in mind that [origin policies](https://en.wikipedia.org/wiki/Same-origin_policy) apply to the image source, and you may not use cross-domain images without [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing).
+> Note: in the Browser (not contain Electron & NW.js), this method is equivalent to toDataURL, callback will still be executed.
 
-Here is an example:
+- **path:** the path where the resultant image will be saved
+- **callback:** a function to be executed when saving is complete
 
+Below is an example:
+
 ```js
-clipper.loadImageFromMemory(image).crop(x, y, width, height, function(dataUrl) {
-    console.log('cropped!');
+clipper.loadImageFromUrl('/path/to/image.jpg', function() {
+    this.crop(x, y, width, height)
+    .toFile('/path/to/image-cropped.jpg', function() {
+        console.log('saved!');
+    });
 });
 ```
 
-In this case, the best practice is to place the code in `onload` callback:
+### clipper.toDataURL([quality, ]callback)
 
+Return a string containing the data URI of current resultant canvas.
+
+- **quality:** quality level, a Number between 1 and 100.
+- **callback:** function(dataUrl), a function to be executed when converting is complete, callback will be passed the result data URI.
+
+Using on the server-side Node.js:
+
 ```js
-image.onload(function(){ //... });
+clipper.toDataURL(function() {...})
+clipper.toDataURL(quality, function() {...})
 ```
 
+in the Browser & Electron & NW.js, in addition to the above usages, below usages also be supported since converting is synchronized:
+
+```js
+clipper.toDataURL()
+clipper.toDataURL(quality)
+```
+
+If your application will run on both sides, the recommendation is using the "callback" way.
+
 ### clipper.quality(level)
 
-- **level:** a Number between 0 and 1 indicating image quality if the requested type is `image/jpeg` or `image/webp`.
+Adjusts the jpeg and webp compression level. Level ranges from 0 to 100. Only supported if the requested type is `image/jpeg` or `image/webp`.
 
-Here is an example:
+- **level:** a Number between 1 and 100 indicating image quality.
 
+Below is an example:
+
 ```js
-clipper.loadImageFromMemory(image).quality(0.68).crop(x, y, width, height, function(dataUrl) {
-    console.log('cropped!');
+clipper.loadImageFromUrl('/path/to/image.jpg', function() {
+    this.quality(68)
+    .crop(x, y, width, height).toDataURL(function(dataUrl) {
+        console.log('cropped!');
+    });
 });
 ```
 
-### clipper.toFile(path, dataUrl, callback)
+### clipper.resize(width [, height])
 
-Convert data url to binary image file.
+Resize the resultant image to the given width and height.
 
-> Note: just for Electron & NW.js, otherwise return the original data url.
+- **width:** Number of pixels wide
+- **height:** Number of pixels high
 
-- **path:** path of output file
-- **dataUrl:** data url that crop() returned
-- **callback:** function()
+To resize the resultant image to a width of 50px while maintaining aspect ratio:
 
-Here is an example:
+```js
+clipper.resize(50);
+```
 
+To resize the resultant image to a height of 50px while maintaining aspect ratio:
+
 ```js
-clipper.loadImageFromMemory(image).crop(x, y, width, height, function(dataUrl) {
-    this.toFile(outputFileName, dataUrl, function() {
-        console.log('saved!');
-    });
-});
+clipper.resize(null, 50);
 ```
 
-### clipper.clearArea(x, y, width, height)
+To resize the resultant image to fit a 50x100 rectangle (lose aspect ratio):
 
-Used to clear rectangular area of canvas. The parameters description see `crop` above.
+```js
+clipper.resize(50, 100);
+```
 
-Here is an example:
+### clipper.clear(x, y, width, height)
 
+Removes rectangular pixels from the given width and height at the given x and y position.
+
+- **x:** the x axis of the coordinate for the rectangle starting point
+- **y:** the y axis of the coordinate for the rectangle starting point
+- **width:** Number of pixels wide will be removed
+- **height:** Number of pixels high will be removed
+
+Below is an example:
+
 ```js
-clipper.loadImageFromUrl('example.jpg', function() {
-    this.clearArea(50, 50, 100, 100).crop(0, 0, 300, 300, function(dataUrl) {
+clipper.loadImageFromUrl('/path/to/image.jpg', function() {
+    this.clear(50, 50, 100, 100)
+    .crop(0, 0, 300, 300).toDataURL(function(dataUrl) {
         preview.src = dataUrl;
@@ -190,20 +247,18 @@ });
 
-### clipper.toDataUrl(quality)
-
-Return data url of current canvas.
-
-- **quality:** quality level, a Number between 0 and 1.
-
 ### clipper.reset()
 
-Used to restore the canvas, useful after `clearArea()` called.
+Used to restore the canvas, useful after `clear()`, `crop()`, `resize()` called.
 
-Here is an example:
+Below is an example:
 
 ```js
-clipper.loadImageFromUrl('example.jpg', function() {
-    clipper.clearArea(50, 50, 100, 100).crop(0, 0, 300, 300, function(dataUrl) {
+clipper.loadImageFromUrl('/path/to/image.jpg', function() {
+    this.clear(50, 50, 100, 100)
+    .crop(0, 0, 300, 300)
+    .toDataURL(function(dataUrl) {
         console.log('cropped, part of data has been cleared');
 
-        clipper.reset().crop(50, 50, 100, 100, function(dataUrl2) {
+        this.reset()
+        .crop(50, 50, 100, 100)
+        .toDataURL(function(dataUrl2) {
             console.log('regained the cleared data:', dataUrl2);
@@ -215,2 +270,26 @@ });
 
+### clipper.injectNodeCanvas(Canvas)
+
+Inject canvas implementation library into the context of instance. Can be used only on the sever-side Node.js.
+
+Usage:
+
+```js
+var ImageClipper = require('image-clipper');
+var Canvas = require('canvas');
+var clipper = new ImageClipper();
+
+clipper.injectNodeCanvas(Canvas);
+```
+
+Equivalent to:
+
+```js
+var ImageClipper = require('image-clipper');
+var Canvas = require('canvas');
+var clipper = new ImageClipper({
+    canvas: Canvas
+});
+```
+
 ### clipper.getCanvas()
@@ -226,4 +305,12 @@
 
-# Tests
+# Testing
 
+### Testing on the server-side Node.js (with node-canvas)
+
+```
+npm test
+```
+
+### Testing on the client-side (Browser & Electron & NW.js)
+
 First install jasmine:
@@ -235,3 +322,3 @@
 
-Then you can run the tests using `npm run server` and open http://localhost:9100/test/jasmine/runner.html
+Then you can run the tests using `npm start` and open http://localhost:9100/test/jasmine/runner.html
 
@@ -238,0 +325,0 @@ # License

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

444740

increased by12.01%

Number of package files

39

increased by8.33%

Lines of code

5282

increased by16.14%

Number of lines in readme file

315

increased by38.16%

Worsened metrics

Dev dependency count

7

increased by16.67%

Number of low supply chain risk alerts

7

increased by40%

No dependency changes