feat: white background for png file with jpeg file extension

Author: Donaldcwl

README.md

@@ -78,7 +78,7 @@ So, we resize the image to less than the maximum size that each browser restrict
 imageCompression.getDataUrlFromFile(file: File): Promise<base64 encoded string>
 imageCompression.getFilefromDataUrl(dataUrl: string, filename: string, lastModified?: number): Promise<File>
 imageCompression.loadImage(url: string): Promise<HTMLImageElement>
-imageCompression.drawImageInCanvas(img: HTMLImageElement): HTMLCanvasElement | OffscreenCanvas
+imageCompression.drawImageInCanvas(img: HTMLImageElement, fileType?: string): HTMLCanvasElement | OffscreenCanvas
 imageCompression.drawFileInCanvas(file: File): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement | OffscreenCanvas]>
 imageCompression.canvasToFile(canvas: HTMLCanvasElement | OffscreenCanvas, fileType: string, fileName: string, fileLastModified: number, quality?: number): Promise<File>
 imageCompression.getExifOrientation(file: File): Promise<number> // based on https://stackoverflow.com/a/32490603/10395024

lib/index.d.ts

@@ -28,7 +28,7 @@ declare namespace imageCompression {
     function getDataUrlFromFile(file: File): Promise<string>;
     function getFilefromDataUrl(dataUrl: string, filename: string, lastModified?: number): Promise<File>;
     function loadImage(src: string): Promise<HTMLImageElement>;
-    function drawImageInCanvas(img: HTMLImageElement): HTMLCanvasElement;
+    function drawImageInCanvas(img: HTMLImageElement, fileType?: string): HTMLCanvasElement;
     function drawFileInCanvas(file: File): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement]>;
     function canvasToFile(canvas: HTMLCanvasElement, fileType: string, fileName: string, fileLastModified: number, quality?: number): Promise<File>;
     function getExifOrientation(file: File): Promise<number>;

lib/utils.js

@@ -170,11 +170,16 @@ export function getNewCanvasAndCtx(width, height) {
  * drawImageInCanvas
  *
  * @param {HTMLImageElement} img
+ * @param {string} [fileType=undefined]
  * @returns {HTMLCanvasElement | OffscreenCanvas}
  */
-export function drawImageInCanvas(img) {
+export function drawImageInCanvas(img, fileType = undefined) {
   const { width, height } = approximateBelowMaximumCanvasSizeOfBrowser(img.width, img.height);
   const [canvas, ctx] = getNewCanvasAndCtx(width, height);
+  if (fileType && /jpe?g/.test(fileType)) {
+    ctx.fillStyle = 'white'; // to fill the transparent background with white color for png file in jpeg extension
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   return canvas;
 }
@@ -228,7 +233,7 @@ export async function drawFileInCanvas(file) {
       throw e2;
     }
   }
-  const canvas = drawImageInCanvas(img);
+  const canvas = drawImageInCanvas(img, file.type);
   return [img, canvas];
 }