feat: increase initial PNG color depth to improve output quality #180

Author: Donaldcwl

lib/image-compression.js

@@ -112,7 +112,11 @@ export default async function compress(file, options, previousProgress = 0) {
 
     ctx.drawImage(canvas, 0, 0, newWidth, newHeight);
 
-    quality *= 0.95;
+    if (outputFileType === 'image/png') {
+      quality *= 0.85;
+    } else {
+      quality *= 0.95;
+    }
     // eslint-disable-next-line no-await-in-loop
     compressedFile = await canvasToFile(newCanvas, outputFileType, file.name, file.lastModified, quality);
 

lib/utils.js

@@ -257,7 +257,10 @@ export async function canvasToFile(canvas, fileType, fileName, fileLastModified,
   if (fileType === 'image/png') {
     const ctx = canvas.getContext('2d');
     const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    const png = UPNG.encode([data], canvas.width, canvas.height, 256 * quality);
+    if (process.env.BUILD === 'development') {
+      console.log('png no. of colors', 4096 * quality);
+    }
+    const png = UPNG.encode([data.buffer], canvas.width, canvas.height, 4096 * quality);
     file = new Blob([png], { type: fileType });
     file.name = fileName;
     file.lastModified = fileLastModified;