Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
dear-image
Advanced tools
dear-image - npm Package Compare versions
Comparing version 0.0.0 to 1.0.0
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).DearImage=t()}(this,function(){"use strict";var e=function(e){this.context=e},t={canvas:{configurable:!0},sizeX:{configurable:!0},sizeY:{configurable:!0},size:{configurable:!0},minSize:{configurable:!0},maxSize:{configurable:!0}};t.canvas.get=function(){return this.context.canvas},t.sizeX.get=function(){return this.canvas.width},t.sizeY.get=function(){return this.canvas.height},t.size.get=function(){return{x:this.sizeX,y:this.sizeY}},t.minSize.get=function(){return Math.min(this.sizeX,this.sizeY)},t.maxSize.get=function(){return Math.max(this.sizeX,this.sizeY)},Object.defineProperties(e.prototype,t);var r="undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:void 0,n=!1,i=!1,o=!1;r===r.window?n=!0:r===r.self?o=!0:r===r.global&&(i=!0),Object.assign(e,{inBrowser:n,inNode:i,inWorker:o});var s,a,u,f=e.inBrowser,c=e.inNode,h=e.inWorker,m=r.HTMLCanvasElement,l=r.OffscreenCanvas;if(f&&m&&(s=function(){return document.createElement("canvas")}),(f||h)&&l&&(a=function(){return new l}),h)u=a;else if(f)u=s||a;else if(c)try{var v=require("canvas").Canvas;u=function(){return new v}}catch(e){}e.blank=function(e,t){void 0===t&&(t=e),e=Number.isFinite(e)&&e>0?Math.round(e):0,t=Number.isFinite(t)&&t>0?Math.round(t):0;var r=u();return r.width=e,r.height=t,new this(r.getContext("2d"))},e.isDearImage=function(t){return t instanceof e};var d,g=(d=!1,function(){return d});function z(e){return Promise.resolve().then(function(){var t,r;if(!e.complete)return new Promise(function(n,i){t=n,r=i,e.addEventListener("load",t),e.addEventListener("error",r)}).finally(function(){e.removeEventListener("load",t),e.removeEventListener("error",r)}).then(function(){})})}var p,b,I,y,F,X,Y,w,L=e.inBrowser,M=e.inNode,N=e.inWorker,x=e.isDearImage,E=function(e){return"string"==typeof e},B=g,C=g,D=g,S=g,T=g,H=g,U=g,k=r.Blob,O=r.Buffer,P=(r.createImageBitmap,r.HTMLCanvasElement),R=r.HTMLImageElement,j=r.Image,W=r.OffscreenCanvas,q=r.URL;if((L||N)&&W&&(H=function(e){return e instanceof W}),L&&(P&&(S=function(e){return e instanceof P}),D=function(e){return S(e)||H(e)},R&&(T=function(e){return e instanceof R},p=function(e){return this.fromCanvasImageSource(e,e.naturalWidth,e.naturalHeight)},F=function(e){var t=this;return z(e).then(function(){return t.fromHTMLImageElement(e)})},Y=function(e){var t=this;return Promise.resolve().then(function(){var r=new j;return r.src=e,t.loadFromHTMLImageElement(r)})})),N&&(D=H),(L||N)&&k&&(B=function(e){return e instanceof k},Y&&q&&q.createObjectURL&&(I=function(e){var t=this;return Promise.resolve().then(function(){var r=q.createObjectURL(e);return t.loadFromString(r)})})),(L||N||M)&&q&&(U=function(e){return e instanceof q},w=function(e){return this.loadFromString(""+e)}),M)try{var A=require("canvas"),G=A.Canvas,J=A.loadImage;D=function(e){return e instanceof G},O&&(C=O.isBuffer),b=function(e){return this.fromCanvasImageSource(e,e.width,e.height)},Y=X=function(e){var t=this;return J(e).then(function(e){return t.fromNodeImage(e)})},y=X}catch(e){}function K(e){for(var t=[],r=arguments.length-1;r-- >0;)t[r]=arguments[r+1];return function(){for(var r=[],n=arguments.length;n--;)r[n]=arguments[n];return e.call.apply(e,[this].concat(t,r))}}Object.assign(e,{from:function(e){if(D(e))return this.fromCanvas(e);if(T(e))return this.fromHTMLImageElement(e);if(x(e))return this.fromDearImage(e);throw new TypeError},fromCanvas:function(e){return this.fromCanvasImageSource(e,e.width,e.height)},fromCanvasImageSource:function(e,t,r){var n=this.blank(t,r);return n.context.drawImage(e,0,0),n},fromHTMLImageElement:p,fromNodeImage:b,fromDearImage:function(e){return this.fromCanvas(e.canvas)},loadFrom:function(e){var t=this;return Promise.resolve().then(function(){return B(e)?t.loadFromBlob(e):C(e)?t.loadFromBuffer(e):T(e)?t.loadFromHTMLImageElement(e):E(e)?t.loadFromString(e):U(e)?t.loadFromURL(e):t.from(e)})},loadFromBlob:I,loadFromBuffer:y,loadFromHTMLImageElement:F,loadFromNodeImageSource:X,loadFromString:Y,loadFromURL:w}),e.fromExcept=function(e){return this.isDearImage(e)?e:this.from(e)},e.loadFromExcept=function(e){var t=this;return Promise.resolve().then(function(){return t.isDearImage(e)?e:t.loadFrom(e)})},e.prototype.crop=function(e,t,r,n){if(Number.isFinite(e)?(e=Math.round(e))<0&&(e+=this.sizeX):e=0,Number.isFinite(t)?(t=Math.round(t))<0&&(t+=this.sizeY):t=0,Number.isFinite(r)?(r=Math.round(r))<0&&(e+=r,r*=-1):r=this.sizeX,Number.isFinite(n)?(n=Math.round(n))<0&&(t+=n,n*=-1):n=this.sizeY,e||t||r!==this.sizeX||n!==this.sizeY){var i=this.constructor.blank(r,n);return r&&n&&this.sizeX&&this.sizeY&&i.context.drawImage(this.canvas,-e,-t),i}return this};var Q=function(e,t){if(this.sizeX&&this.sizeY){var r=this.constructor.blank(this.sizeX,this.sizeY),n=r.context;return n.save(),n.translate(e?this.sizeX:0,t?this.sizeY:0),n.scale(e?-1:1,t?-1:1),n.drawImage(this.canvas,0,0),n.restore(),r}return this};Object.assign(e.prototype,{flipX:K(Q,!0,!1),flipY:K(Q,!1,!0),rotate180:K(Q,!0,!0)}),e.prototype.reframe=function(e,t,r,n){var i=this;void 0===n&&(n=r),e=!Number.isFinite(e)||e<0?this.sizeX:Math.round(e),t=!Number.isFinite(t)||t<0?this.sizeY:Math.round(t);var o=function(){switch(r){case"start":return 0;case"end":return-e}return(i.sizeX+e)/-2}(),s=function(){switch(n){case"start":return 0;case"end":return-t}return(i.sizeY+t)/-2}();return this.crop(o,s,e,t)},e.prototype.resize=function(e,t){if(e=!Number.isFinite(e)||e<0?this.sizeX:Math.round(e),t=!Number.isFinite(t)||t<0?this.sizeY:Math.round(t),e!==this.sizeX||t!==this.sizeY){var r=this.constructor.blank(e,t);if(e&&t&&this.sizeX&&this.sizeY){var n=e/this.sizeX,i=t/this.sizeY,o=r.context;o.save(),o.scale(n,i),o.drawImage(this.canvas,0,0),o.restore()}return r}return this},e.prototype.resizeX=function(e,t){var r=this,n=function(){if(t){if(!r.sizeX)return 0;if(Number.isFinite(e))return e*r.sizeY/r.sizeX}return r.sizeY}();return this.resize(e,n)},e.prototype.resizeY=function(e,t){var r=this,n=function(){if(t){if(!r.sizeY)return 0;if(Number.isFinite(e))return e*r.sizeX/r.sizeY}return r.sizeX}();return this.resize(n,e)};var V=function(e){if(this.sizeX||this.sizeY){var t=this.constructor.blank(this.sizeY,this.sizeX);if(this.sizeX&&this.sizeY){var r=t.context;r.save(),r.translate(this.sizeY/2,this.sizeX/2),r.rotate(Math.PI/(e?2:-2)),r.drawImage(this.canvas,this.sizeX/-2,this.sizeY/-2),r.restore()}return t}return this};return Object.assign(e.prototype,{rotate90:K(V,!0),rotate270:K(V,!1)}),e.prototype.toDataURL=function(){for(var e,t=[],r=arguments.length;r--;)t[r]=arguments[r];return(e=this.canvas).toDataURL.apply(e,t)},e.prototype.toImage=function(){for(var e,t=[],r=arguments.length;r--;)t[r]=arguments[r];var n=new Image;return n.src=(e=this).toDataURL.apply(e,t),n},e.prototype.saveToImage=function(){for(var e=this,t=[],r=arguments.length;r--;)t[r]=arguments[r];return Promise.resolve().then(function(){var r,n=(r=e).toImage.apply(r,t);return z(n).then(function(){return n})})},e.prototype.scale=function(e,t){void 0===t&&(t=e);var r=this.sizeX,n=this.sizeY;return Number.isFinite(e)&&(r*=e),Number.isFinite(t)&&(n*=t),this.resize(r,n)},e.prototype.toBlob=function(e,t){void 0===e&&(e="image/png");for(var r=this.toDataURL(e,t),n=atob(r.split(",")[1]),i=n.length,o=new Uint8Array(i),s=0;s<i;s++)o[s]=n.charCodeAt(s);return new Blob([o],{type:e})},e.prototype.toBuffer=function(){for(var e,t=[],r=arguments.length;r--;)t[r]=arguments[r];return(e=this.canvas).toBuffer.apply(e,t)},e.prototype.toImageData=function(){return this.context.getImageData(0,0,this.sizeX,this.sizeY)},e}); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).DearImage=e()}(this,function(){"use strict";var t=function(t){this.context=t},e={canvas:{configurable:!0},sizeX:{configurable:!0},sizeY:{configurable:!0},size:{configurable:!0},minSize:{configurable:!0},maxSize:{configurable:!0}};function n(){return document.createElement("canvas")}function i(){return new OffscreenCanvas}function r(){try{return n()}catch(t){}try{return i()}catch(t){}try{return new(0,require("canvas").Canvas)}catch(t){}}function s(){return new Image}function a(){try{return s()}catch(t){}try{return new(0,require("canvas").Image)}catch(t){}}e.canvas.get=function(){return this.context.canvas},e.sizeX.get=function(){return this.canvas.width},e.sizeY.get=function(){return this.canvas.height},e.size.get=function(){return{x:this.sizeX,y:this.sizeY}},e.minSize.get=function(){return Math.min(this.sizeX,this.sizeY)},e.maxSize.get=function(){return Math.max(this.sizeX,this.sizeY)},Object.defineProperties(t.prototype,e),t.blank=function(t,e){t=Number.isFinite(t)&&t>0?Math.round(t):0,e=Number.isFinite(e)&&e>0?Math.round(e):0;var n=r();return n.width=t,n.height=e,new this(n.getContext("2d"))},t.isDearImage=function(e){return e instanceof t};var o="undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:void 0;function u(t){return function(t){var e=o.HTMLCanvasElement;return e&&t instanceof e}(t)||function(t){var e=o.OffscreenCanvas;return e&&t instanceof e}(t)||function(t){try{return t instanceof require("canvas").Canvas}catch(t){}}(t)}var c="data:";function f(t){return function(t){var e=o.HTMLImageElement;return e&&t instanceof e}(t)||function(t){try{return t instanceof require("canvas").Image}catch(t){}}(t)}function h(t){var e=o.ImageData;return e&&t instanceof e||function(t){try{return t instanceof require("canvas").ImageData}catch(t){}}(t)}var l=c+",";function z(t){return new Promise(function(e){e(t())})}var v=t.isDearImage,p=function(t){var e=this.blank(t.width,t.height);return e.sizeX&&e.sizeY&&e.context.putImageData(t,0,0),e},m=function(t,e,n){var i=this.blank(e,n);return i.sizeX&&i.sizeY&&i.context.drawImage(t,0,0),i},g=function(t){return m.call(this,t,t.width,t.height)},d=function(t){return m.call(this,t,t.naturalWidth,t.naturalHeight)},b=function(t){return g.call(this,t.canvas)},y=function(t){if(v(t))return b.call(this,t);if(h(t))return p.call(this,t);if(u(t))return g.call(this,t);if(f(t))return d.call(this,t);throw new TypeError},X=function(t){var e=this;return function(t){return z(function(){if(!t.complete)return new Promise(function(e,n){t.onload=e,t.onerror=n}).finally(function(){t.onload=null,t.onerror=null})})}(t).then(function(){return d.call(e,t)})},Y=function(t){var e=a();return e.src=t,X.call(this,e)},w=function(t){return function(t){return t.length}(t)?Y.call(this,t):this.blank()},I=function(t){var e=this;if(function(t){return t.size}(t)){var n=URL.createObjectURL(t);return z(function(){return Y.call(e,n)}).finally(function(){URL.revokeObjectURL(n)})}return this.blank()},x=function(t){return function(t){return t.length>l.length}(t)?Y.call(this,t):this.blank()},F=function(t){return function(t){return t.startsWith(c)}(t)?x.call(this,t):Y.call(this,t)},M=function(t){return Y.call(this,""+t)};function D(t){for(var e=[],n=arguments.length-1;n-- >0;)e[n]=arguments[n+1];return function(){for(var n=[],i=arguments.length;i--;)n[i]=arguments[i];return t.call.apply(t,[this].concat(e,n))}}Object.assign(t,{from:y,loadFrom:function(t){var e=this;return z(function(){return function(t){return"string"==typeof t}(t)?F.call(e,t):function(t){var e=o.URL;return e&&t instanceof e}(t)?M.call(e,t):function(t){var e=o.Buffer;return e&&t instanceof e}(t)?w.call(e,t):function(t){var e=o.Blob;return e&&t instanceof e}(t)?I.call(e,t):f(t)?X.call(e,t):y.call(e,t)})}}),t.fromExcept=function(t){return this.isDearImage(t)?t:this.from(t)},t.loadFromExcept=function(t){var e=this;return Promise.resolve().then(function(){return e.isDearImage(t)?t:e.loadFrom(t)})},t.prototype.crop=function(t,e,n,i){if(Number.isFinite(t)?(t=Math.round(t))<0&&(t+=this.sizeX):t=0,Number.isFinite(e)?(e=Math.round(e))<0&&(e+=this.sizeY):e=0,Number.isFinite(n)?(n=Math.round(n))<0&&(t+=n,n*=-1):n=this.sizeX,Number.isFinite(i)?(i=Math.round(i))<0&&(e+=i,i*=-1):i=this.sizeY,t||e||n!==this.sizeX||i!==this.sizeY){var r=this.constructor.blank(n,i);return n&&i&&this.sizeX&&this.sizeY&&r.context.drawImage(this.canvas,-t,-e),r}return this};var N=function(t,e){if(this.sizeX&&this.sizeY){var n=this.constructor.blank(this.sizeX,this.sizeY),i=n.context;return i.save(),i.translate(t?this.sizeX:0,e?this.sizeY:0),i.scale(t?-1:1,e?-1:1),i.drawImage(this.canvas,0,0),i.restore(),n}return this};Object.assign(t.prototype,{flipX:D(N,!0,!1),flipY:D(N,!1,!0),rotate180:D(N,!0,!0)}),t.prototype.reframe=function(t,e,n,i){var r=this;t=!Number.isFinite(t)||t<0?this.sizeX:Math.round(t),e=!Number.isFinite(e)||e<0?this.sizeY:Math.round(e);var s=function(){switch(n){case"start":return 0;case"end":return-t}return(r.sizeX+t)/-2}(),a=function(){switch(i){case"start":return 0;case"end":return-e}return(r.sizeY+e)/-2}();return this.crop(s,a,t,e)},t.prototype.resize=function(t,e){if(t=!Number.isFinite(t)||t<0?this.sizeX:Math.round(t),e=!Number.isFinite(e)||e<0?this.sizeY:Math.round(e),t!==this.sizeX||e!==this.sizeY){var n=this.constructor.blank(t,e);if(t&&e&&this.sizeX&&this.sizeY){var i=t/this.sizeX,r=e/this.sizeY,s=n.context;s.save(),s.scale(i,r),s.drawImage(this.canvas,0,0),s.restore()}return n}return this},t.prototype.rescale=function(t,e){var n=this.sizeX,i=this.sizeY;return Number.isFinite(t)&&(n*=t),Number.isFinite(e)&&(i*=e),this.resize(n,i)},t.prototype.resizeX=function(t,e){var n=this,i=function(){if(e){if(!n.sizeX)return 0;if(Number.isFinite(t))return t*n.sizeY/n.sizeX}return n.sizeY}();return this.resize(t,i)},t.prototype.resizeY=function(t,e){var n=this,i=function(){if(e){if(!n.sizeY)return 0;if(Number.isFinite(t))return t*n.sizeX/n.sizeY}return n.sizeX}();return this.resize(i,t)};var L=function(t){if(this.sizeX||this.sizeY){var e=this.constructor.blank(this.sizeY,this.sizeX);if(this.sizeX&&this.sizeY){var n=e.context;n.save(),n.translate(this.sizeY/2,this.sizeX/2),n.rotate(Math.PI/(t?2:-2)),n.drawImage(this.canvas,this.sizeX/-2,this.sizeY/-2),n.restore()}return e}return this};return Object.assign(t.prototype,{rotate90:D(L,!0),rotate270:D(L,!1)}),t.prototype.scale=function(t){return this.rescale(t,t)},t.prototype.toDataURL=function(){for(var t,e=[],n=arguments.length;n--;)e[n]=arguments[n];return(t=this.canvas).toDataURL.apply(t,e)},t.prototype.toBlob=function(t,e){void 0===t&&(t="image/png");for(var n=this.toDataURL(t,e),i=atob(n.split(",")[1]),r=i.length,s=new Uint8Array(r),a=0;a<r;a++)s[a]=i.charCodeAt(a);return new Blob([s],{type:t})},t.prototype.toBuffer=function(){for(var t,e=[],n=arguments.length;n--;)e[n]=arguments[n];return this.sizeX&&this.sizeY?(t=this.canvas).toBuffer.apply(t,e):Buffer.alloc(0)},t.prototype.toHTMLCanvasElement=function(){var t=n();return t.width=this.sizeX,t.height=this.sizeY,t.getContext("2d").drawImage(this.canvas,0,0),t},t.prototype.toHTMLImageElement=function(){for(var t,e=[],n=arguments.length;n--;)e[n]=arguments[n];var i=s();return i.src=(t=this).toDataURL.apply(t,e),i},t.prototype.toImageData=function(){return this.context.getImageData(0,0,this.sizeX,this.sizeY)},t.prototype.toOffscreenCanvas=function(){var t=i();return t.width=sizeX,t.height=sizeY,t.context.drawImage(this.canvas,0,0),t},t}); |
| { | ||
| "name": "dear-image", | ||
| "version": "0.0.0", | ||
| "description": "A collection of utility functions for the image examinations and transformations.", | ||
| "version": "1.0.0", | ||
| "description": "A class that represents a graphical image.", | ||
| "keywords": [ | ||
| "2d", | ||
| "blob", | ||
| "browser", | ||
| "buffer", | ||
| "canvas", | ||
| "contain", | ||
| "context", | ||
| "cover", | ||
| "crop", | ||
| "data", | ||
| "draw", | ||
| "edit", | ||
| "file", | ||
| "fit", | ||
| "flip", | ||
| "frame", | ||
| "html", | ||
| "image", | ||
| "load", | ||
| "resize", | ||
| "node", | ||
| "rotate", | ||
| "save", | ||
| "scale", | ||
| "size", | ||
| "url" | ||
@@ -33,4 +43,4 @@ ], | ||
| "devDependencies": { | ||
| "canvas": "^2.5.0", | ||
| "rollup": "^1.17.0", | ||
| "canvas": "^2.6.0", | ||
| "rollup": "^1.20.2", | ||
| "rollup-plugin-buble": "^0.19.8", | ||
@@ -37,0 +47,0 @@ "rollup-plugin-terser": "^5.1.1" |
179
README.md
| # DearImage | ||
| A collection of utility functions for the image examinations and transformations. | ||
| A class that represents a graphical image. | ||
@@ -36,18 +36,15 @@ ## setup | ||
| ### constructor | ||
| ### static methods | ||
| `new DearImage(context)` | ||
| `.isDearImage(value)` | ||
| Determines whether the passed value is an instance of `DearImage`. | ||
| | argument | description | | ||
| | ---: | :--- | | ||
| | `context` | The 2D rendering context. | | ||
| | `value` | The value to be checked. | | ||
| ```javascript | ||
| let canvas = document.getElementById('my-canvas'); | ||
| let context = canvas.getContext('2d'); | ||
| let image = new DearImage(context); | ||
| console.log(image.canvas === canvas); // => true | ||
| ``` | ||
| Returns `true` if the passed value is an instance of `DearImage`, `false` otherwise. | ||
| ### static methods | ||
| --- | ||
@@ -60,14 +57,10 @@ `.from(value)` | ||
| | ---: | :--- | | ||
| | `value` | The value to create from. Supported value types are [`HTMLCanvasElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement), [`HTMLImageElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement), [`OffscreenCanvas`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas), `Canvas` from [`canvas`](https://github.com/Automattic/node-canvas) and `DearImage`. | | ||
| | `value` | The value to create from. Supported value types are [`ImageData`](https://developer.mozilla.org/en-US/docs/Web/API/ImageData), [`HTMLCanvasElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement), [`OffscreenCanvas`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas), [`HTMLImageElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) and `DearImage`. | | ||
| Returns the created `DearImage` instance. | ||
| ```javascript | ||
| let canvas = document.getElementById('my-canvas'); | ||
| let image = DearImage.from(canvas); | ||
| console.log(image.canvas === canvas); // => false | ||
| let otherDuck = DearImage.from(image); | ||
| console.log(otherDuck.canvas === image.canvas); // => false | ||
| let element = document.getElementById('my-image'); | ||
| let image = DearImage.from(element); | ||
| document.body.appendChild(image.toHTMLCanvasElement()); | ||
| ``` | ||
@@ -88,7 +81,6 @@ | ||
| ```javascript | ||
| let canvas = document.getElementById('my-canvas'); | ||
| let image = DearImage.fromExcept(canvas); | ||
| console.log(image.canvas === canvas); // => false | ||
| let otherDuck = DearImage.fromExcept(image); | ||
| console.log(otherDuck === image); // => true | ||
| let element = document.getElementById('my-image'); | ||
| let image = DearImage.fromExcept(element); | ||
| let otherImage = DearImage.fromExcept(image); | ||
| console.log(otherImage === image); // => true | ||
| ``` | ||
@@ -104,3 +96,3 @@ | ||
| | ---: | :--- | | ||
| | `value` | The value to load from. Supported value types are `String`, [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL), [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob), [`HTMLImageElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement), [`Buffer`](https://nodejs.org/api/buffer.html) and everything the function `.from` supports. | | ||
| | `value` | The value to load from. Supported value types are `String`, [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL), [`Buffer`](https://nodejs.org/api/buffer.html), [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob), [`HTMLImageElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) and everything the function `.from` supports. | | ||
@@ -110,4 +102,5 @@ Returns a promise that resolves to the created `DearImage` instance. | ||
| ```javascript | ||
| let image = await DearImage.loadFrom('/path/to/image.jpg'); | ||
| document.body.appendChild(image.canvas); | ||
| let url = '/path/to/image.jpg'; | ||
| let image = await DearImage.loadFrom(url); | ||
| document.body.appendChild(image.toHTMLCanvasElement()); | ||
| ``` | ||
@@ -127,5 +120,12 @@ | ||
| ```javascript | ||
| let url = '/path/to/image.jpg'; | ||
| let image = await DearImage.loadFrom(url); | ||
| let otherImage = await DearImage.loadFromExcept(image); | ||
| console.log(otherImage === image); // => true | ||
| ``` | ||
| --- | ||
| `.blank(sizeX, sizeY)` | ||
| `.blank(sizeX = 0, sizeY = 0)` | ||
@@ -136,24 +136,8 @@ Creates a `DearImage` instance with a transparent image. | ||
| | ---: | :--- | | ||
| | `size` | The size of the image. | | ||
| | `sizeXY` | The size of the image. | | ||
| Returns the created `DearImage` instance. | ||
| **overloading** | ||
| - `() => (0, 0)` | ||
| ### properties | ||
| `.canvas` | ||
| The canvas. | ||
| --- | ||
| `.context` | ||
| The 2D rendering context. | ||
| --- | ||
| `.sizeX` | ||
@@ -205,3 +189,3 @@ | ||
| `.resize(sizeX, sizeY)` | ||
| `.resize(sizeX = this.sizeX, sizeY = this.sizeY)` | ||
@@ -212,3 +196,3 @@ Changes the size of the image. | ||
| | ---: | :--- | | ||
| | `size` | The new size of the image. | | ||
| | `sizeXY` | The new size of the image. | | ||
@@ -223,3 +207,3 @@ Returns the created `DearImage` instance. | ||
| `.resizeX(sizeX, proportionally = false)` | ||
| `.resizeX(size = this.sizeY, proportionally = false)` | ||
@@ -230,4 +214,4 @@ Changes the size of the image along the x-axis. | ||
| | ---: | :--- | | ||
| | `sizeX` | The new size of the image along the x-axis. | | ||
| | `proportionally` | If `true`, keeps the aspect ratio of the image. | | ||
| | `size` | The new size of the image along the x-axis. | | ||
| | `proportionally` | If `true`, the aspect ratio of the image is preserved. | | ||
@@ -238,3 +222,3 @@ Returns the created `DearImage` instance. | ||
| `.resizeY(sizeY, proportionally = false)` | ||
| `.resizeY(size = this.sizeX, proportionally = false)` | ||
@@ -245,4 +229,4 @@ Changes the size of the image along the y-axis. | ||
| | ---: | :--- | | ||
| | `sizeY` | The new size of the image along the y-axis. | | ||
| | `proportionally` | If `true`, keeps the aspect ratio of the image. | | ||
| | `size` | The new size of the image along the y-axis. | | ||
| | `proportionally` | If `true`, the aspect ratio of the image is preserved. | | ||
@@ -253,3 +237,3 @@ Returns the created `DearImage` instance. | ||
| `.crop(originX, originY, sizeX, sizeY)` | ||
| `.crop(originX = 0, originY = 0, sizeX = this.sizeX, sizeY = this.sizeY)` | ||
@@ -260,4 +244,4 @@ Selects an area from the image. | ||
| | ---: | :--- | | ||
| | `origin` | The origin of the area. A negative number indicates the origin from the end of the image. | | ||
| | `size` | The size of the area. A negative number reverses the direction. | | ||
| | `originXY` | The origin of the area. A negative number indicates the origin from the end of the image. | | ||
| | `sizeXY` | The size of the area. A negative number reverses the direction. | | ||
@@ -272,3 +256,3 @@ Returns the created `DearImage` instance. | ||
| `.reframe(sizeX, sizeY, alignmentX, alignmentY)` | ||
| `.reframe(sizeX = this.sizeX, sizeY = this.sizeY, alignmentX = 'center', alignmentY = 'center')` | ||
@@ -279,11 +263,7 @@ Aligns the image inside an area. | ||
| | ---: | :--- | | ||
| | `size` | The size of the area. | | ||
| | `alignment` | The alignment of the image. Possible values are `'start'`, `'center'` and `'end'`. | | ||
| | `sizeXY` | The size of the area. | | ||
| | `alignmentXY` | The alignment of the image. Possible values are `'start'`, `'center'` and `'end'`. | | ||
| Returns the created `DearImage` instance. | ||
| **overloading** | ||
| - `(sizeX: number, sizeY: number) => (sizeX, sizeY, 'center', 'center')` | ||
| ```javascript | ||
@@ -295,3 +275,3 @@ let image = DearImage.from(source).reframe(300, 150, 'start', 'end'); | ||
| `.scale(scalingX, scalingY)` | ||
| `.rescale(scalingX = 1, scalingY = 1)` | ||
@@ -302,10 +282,22 @@ Changes the size of the image factorially. | ||
| | ---: | :--- | | ||
| | `scaling` | The scaling factor. | | ||
| | `scalingXY` | The scaling factor. | | ||
| Returns the created `DearImage` instance. | ||
| **overloading** | ||
| ```javascript | ||
| let image = DearImage.from(source).rescale(3/2, 2/3); | ||
| ``` | ||
| - `(scaling: number) => (scaling, scaling)` | ||
| --- | ||
| `.scale(scaling = 1)` | ||
| Changes the size of the image factorially while preserving the aspect ratio. | ||
| | argument | description | | ||
| | ---: | :--- | | ||
| | `scaling` | The scaling factor. | | ||
| Returns the created `DearImage` instance. | ||
| ```javascript | ||
@@ -347,37 +339,58 @@ let image = DearImage.from(source).scale(3/2); | ||
| --- | ||
| `.toImage(format, quality)` | ||
| `.toBlob(format, quality)` | ||
| *browser only* | ||
| Creates an [`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) instance representing the content. | ||
| Creates a [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) instance representing the content. | ||
| Returns the created `Image` instance. | ||
| Returns the created `Blob` instance. | ||
| ```javascript | ||
| let image = DearImage.from(source); | ||
| let image = image.toImage('image/jpeg', 0.75); | ||
| image.style.border = '1px solid BlueViolet'; | ||
| document.body.appendChild(image); | ||
| ``` | ||
| --- | ||
| `.toBuffer(format, quality)` | ||
| *node only* | ||
| Creates a [`Buffer`](https://nodejs.org/api/buffer.html) instance representing the content. | ||
| Returns the created `Buffer` instance. | ||
| --- | ||
| `.toBlob(format, quality)` | ||
| `.toHTMLCanvasElement()` | ||
| *browser only* | ||
| Creates a [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) instance representing the content. | ||
| Creates a [`HTMLCanvasElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) instance representing the content. | ||
| Returns the created `Blob` instance. | ||
| Returns the created `HTMLCanvasElement` instance. | ||
| --- | ||
| `.toBuffer(format, quality)` | ||
| `.toOffscreenCanvas()` | ||
| *node only* | ||
| *browser only* | ||
| Creates a [`Buffer`](https://nodejs.org/api/buffer.html) instance representing the content. | ||
| Creates an [`OffscreenCanvas`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) instance representing the content. | ||
| Returns the created `Buffer` instance. | ||
| Returns the created `OffscreenCanvas` instance. | ||
| --- | ||
| `.toHTMLImageElement(format, quality)` | ||
| *browser only* | ||
| Creates a [`HTMLImageElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) instance representing the content. | ||
| Returns the created `HTMLImageElement` instance. | ||
| ```javascript | ||
| let image = DearImage.from(source); | ||
| let element = image.toHTMLImageElement('image/jpeg', 0.75); | ||
| element.style.border = '1px solid BlueViolet'; | ||
| document.body.appendChild(element); | ||
| ``` |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.97%
17615
- Number of low quality alerts
- decreased by-33.33%
2
- Number of lines in readme file
- increased by3.57%
377
Worsened metrics
- Lines of code
- decreased by-3.33%
29
No dependency changes