diff --git a/aperture.js b/aperture.js index 5bc7554..898a486 100644 --- a/aperture.js +++ b/aperture.js @@ -1,6 +1,73 @@ class Aperture { /** - * + * Gets a blob from an image and returns it. + * @param {String|HTMLImageElement} image The image to create a blob from. + * @returns {Blob} returns a blob containing the image data. + */ + static async getImageBlob(image) { + var img = image; + + //If the image passed was not an image element then create one. + if (!(img instanceof HTMLImageElement)) { + //Create an image and wait for it to load. + img = new Image(); + var promise = new Promise(resolve => { + img.onload = () => resolve(); + img.onerror = () => resolve(); + }); + img.src = image; + await promise; + } + + //Setup a canvas + var canvas = document.createElement('canvas'); + var ctx = canvas.getContext("2d"); + canvas.width = img.width; + canvas.height = img.height; + + //Clear the canvas to white. + ctx.fillStyle = "white"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + //Draw the image onto the canvas + ctx.drawImage(img, 0, 0, img.width, img.height); + + //Get a blob from the canvas. + var promise = new Promise(resolve => { + canvas.toBlob(blob => resolve(blob), 'image/jpeg', 0.95); + }); + + //Await the creation of the blob and return it. + return await promise; + } + + /** + * Gets an images actual size and returns it. + * @param {String|HTMLImageElement} image The image to get the size of. + * @returns {Object} returns an object containing the width and height of the image. + */ + static async getImageSize(image) { + var img = image; + + if (!(img instanceof HTMLImageElement)) { + //Create an image and wait for it to load. + img = new Image(); + var promise = new Promise(resolve => { + img.onload = () => resolve(); + img.onerror = () => resolve(); + }); + img.src = image; + await promise; + + return { width: img.width, height: img.height }; + } else { + return { width: img.naturalWidth, height: img.naturalHeight }; + } + } + + + /** + * Resizes an image to a new width and returns the new image as a blob. * @param {String|HTMLImageElement} image The image to resize, this can be a image element or url, or base64. * @param {Number} newWidth The new width of the image in pixels. * @param {Number} sharpen The sharpen level to apply to the result, from 0 to 1.0. Defaults to 0.5 @@ -15,8 +82,7 @@ class Aperture { var img = image; //If the image passed was not an image element then create one. - if (!(img instanceof HTMLImageElement)) - { + if (!(img instanceof HTMLImageElement)) { //Create an image and wait for it to load. img = new Image(); var promise = new Promise(resolve => { @@ -36,6 +102,12 @@ class Aperture { oc.width = currWidth; oc.height = currHeight; + //Clear the resize canvas and final canvas to white. + octx.fillStyle = "white"; + octx.fillRect(0, 0, oc.width, oc.height); + ctx.fillStyle = "white"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + //Resize the image. octx.drawImage(img, 0, 0, currWidth, currHeight); @@ -59,7 +131,7 @@ class Aperture { dstBuff = dstData.data, srcBuff = ctx.getImageData(0, 0, w, h).data, y = h; - + while (y--) { x = w; while (x--) { @@ -70,16 +142,16 @@ class Aperture { g = 0; b = 0; a = 0; - + for (cy = 0; cy < katet; cy++) { for (cx = 0; cx < katet; cx++) { scy = sy + cy - half; scx = sx + cx - half; - + if (scy >= 0 && scy < h && scx >= 0 && scx < w) { srcOff = (scy * w + scx) * 4; wt = weights[cy * katet + cx]; - + r += srcBuff[srcOff] * wt; g += srcBuff[srcOff + 1] * wt; b += srcBuff[srcOff + 2] * wt; @@ -87,14 +159,14 @@ class Aperture { } } } - + dstBuff[dstOff] = r * sharpen + srcBuff[dstOff] * (1 - sharpen); dstBuff[dstOff + 1] = g * sharpen + srcBuff[dstOff + 1] * (1 - sharpen); dstBuff[dstOff + 2] = b * sharpen + srcBuff[dstOff + 2] * (1 - sharpen); dstBuff[dstOff + 3] = srcBuff[dstOff + 3]; } } - + //Put the sharpened image back onto the canvas. ctx.putImageData(dstData, 0, 0); @@ -110,6 +182,6 @@ class Aperture { window.Aperture = Aperture; -export { +export { Aperture } \ No newline at end of file