Avatar for Username

Kërkoni te Asistenca

Shmangni karremëzime gjoja asistence. S’do t’ju kërkojmë kurrë të bëni një thirrje apo të dërgoni tekst te një numër telefoni, apo të na jepni të dhëna personale. Ju lutemi, raportoni veprimtari të dyshimtë duke përdorur mundësinë “Raportoni Abuzim”.

Mësoni Më Tepër

Problem with HTMLCanvasElement.toBlob(), "image/webp", & anchor (<a>) using download attribute

  • 1 përgjigje
  • 0 e kanë hasur këtë problem
  • Përgjigjja më e re nga E.C. Marm

E.C. Marm
E.C. Marm
more options

I have a local HTML/Javascript document I use for compressing local image files. It relies on HTMLCanvasElement.toBlob() to achieve the compression in the usual way; a pertinent excerpt: 

                   const output = document.getElementById("outputDiv");
                   const blobURL = URL.createObjectURL(file);
                   const img = new Image();
                   img.src = blobURL;
                   // ...
                   img.onload = function () {
                       URL.revokeObjectURL(this.src);
                       const canvas = document.createElement("canvas");
                       canvas.width = img.width;
                       canvas.height = img.height;
                       const ctx = canvas.getContext("2d");
                       ctx.drawImage(img, 0, 0, img.width, img.height);
                       canvas.toBlob(
                           (blob) => {
                               const anchor = document.createElement("a");
                               anchor.download = getNewFileName(file.name); /* uses extension .webm for .webm, .jpg for everything else */
                               anchor.href = URL.createObjectURL(blob);
                               anchor.textContent = "DOWNLOAD";
                               output.append(anchor);
                           },
                           mime,  /* set earlier based on file extension: .webm -> "image/webm", everything else -> "image/jpeg"
                           quality / 100    /* (user-specified) */
                       );
                   };

Here's the quirky thing, though: when I'm compressing, say, a .jpeg file (or a .png), clicking on the download link opens a save-file dialog, but when using a .webm file, it opens the compressed image in a new tab! True, I can always then save the image from there (the resulting file is in Firefox's temp folder), but I don't understand the difference in behavior -- and indeed, in at least one other browser I tried (the latest Vivaldi) the download happens as expected regardless of input file type. In all cases the anchor hrefs look like, e.g., "blob:null/724ab85e-53ba-4890-9868-7f1ba27d4278".

Any idea why this is happening? I highly doubt it's the intended behavior.

Browser: Firefox 132.0.2 for Windows. Environment: Windows 10 Home 22H2 version 10.0.19045.

I have a local HTML/Javascript document I use for compressing local image files. It relies on HTMLCanvasElement.toBlob() to achieve the compression in the usual way; a pertinent excerpt: const output = document.getElementById("outputDiv"); const blobURL = URL.createObjectURL(file); const img = new Image(); img.src = blobURL; // ... img.onload = function () { URL.revokeObjectURL(this.src); const canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); canvas.toBlob( (blob) => { const anchor = document.createElement("a"); anchor.download = getNewFileName(file.name); /* uses extension .webm for .webm, .jpg for everything else */ anchor.href = URL.createObjectURL(blob); anchor.textContent = "DOWNLOAD"; output.append(anchor); }, mime, /* set earlier based on file extension: .webm -> "image/webm", everything else -> "image/jpeg" quality / 100 /* (user-specified) */ ); }; Here's the quirky thing, though: when I'm compressing, say, a .jpeg file (or a .png), clicking on the download link opens a save-file dialog, but when using a .webm file, it opens the compressed image in a new tab! True, I can always then save the image from there (the resulting file is in Firefox's temp folder), but I don't understand the difference in behavior -- and indeed, in at least one other browser I tried (the latest Vivaldi) the download happens as expected regardless of input file type. In all cases the anchor hrefs look like, e.g., "blob:null/724ab85e-53ba-4890-9868-7f1ba27d4278". Any idea why this is happening? I highly doubt it's the intended behavior. Browser: Firefox 132.0.2 for Windows. Environment: Windows 10 Home 22H2 version 10.0.19045.

Krejt Përgjigjet (1)

E.C. Marm
E.C. Marm I zoti i pyetjes
more options

In the immortal words of Miss Emily Litella, "Never mind!" I figured it out all by my lonesome, and the answer is this:

The problem is not where my .webp (pardon multiple typos of ".webm" above!) image comes from or anything involving the anchor tag, but rather in my default Firefox settings. Under General -> Files and Applications -> Applications, the Action for Content Type "WebP Image" is set to "Open in Firefox" -- which, in a new tab, is exactly what's happening! And why does the "JPEG Image" type act differently? Because its Action is set to "Save File", the same as the PNG & SVG types. Curiously, AV1/AVIF defaults to "Open in Firefox", like WebP. I seriously doubt there's any way to change a Content Type's default Open/Save action on a per-anchor rather than a per-type basis, though please let me know if I'm wrong.

So my question now is this: why the different default Actions for different image types (JPEG, PNG, WebP, & AV1)? I fail to see why they shouldn't be the same, whether Open or Save. Might WebP's default be simply a relic from the bygone days when Firefox didn't support that type very well?

E dobishme?

Bëni një pyetje

Duhet të bëni hyrjen te llogaria juaj që t’i përgjigjeni postimeve. Ju lutemi, filloni me një pyetje të re, nëse nuk keni ende një llogari.