fix: prevent image uploader converting every image to jpeg

components/ImageUploader.tsx

@@ -125,9 +125,9 @@ export default function ImageUploader({
           </div>
         </div>
         <div className="mb-4">
-          <div className="flex flex-col items-center justify-center p-8 mt-6 cropper bg-gray-50">
+          <div className="flex flex-col items-center justify-center p-8 mt-6 cropper">
             {!result && (
-              <div className="flex items-center justify-start w-20 h-20 bg-gray-500 rounded-full max-h-20">
+              <div className="flex items-center justify-start w-20 h-20 bg-gray-50 rounded-full max-h-20">
                 {!imageSrc && (
                   <p className="w-full text-sm text-center text-white sm:text-xs">
                     {t("no_target", { target })}

lib/cropImage.ts

@@ -45,13 +45,13 @@ export async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<
   // on very low ratios, the quality of the resize becomes awful. For this reason the resizeRatio is limited to 0.75
   if (resizeRatio <= 0.75) {
     // With a smaller image, thus improved ratio. Keep doing this until the resizeRatio > 0.75.
-    return getCroppedImg(canvas.toDataURL("image/jpeg"), {
+    return getCroppedImg(canvas.toDataURL("image/png"), {
       width: canvas.width,
       height: canvas.height,
       x: 0,
       y: 0,
     });
   }
 
-  return canvas.toDataURL("image/jpeg");
+  return canvas.toDataURL("image/png");
 }