Added getImageSize and getImageBlob and resize now draws a white background before resizing to prevent black backgrounds with transparent images.

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);