Cannot save to JPEG

[syldub69]

Hi,

Since few week, the addon is no more able to convert images (JPG, etc...) on a lot of webpages.

For instance : https://media.adeo.com/marketplace/LMFR/82586489/20a5ebdd-4b50-46d6-af05-5653439bac2b.jpeg?format=jpg or shorter : https://media.adeo.com/marketplace/LMFR/82586489/20a5ebdd-4b50-46d6-af05-5653439bac2b.jpeg

When I click on the "Save webP as..." menu, it displays the addon interface, then when I click on "JPG 100", nothing happen.

Curiously, if I edit the url of the image then it works : https://media.adeo.com/marketplace/LMFR/82586489/20a5ebdd-4b50-46d6-af05-5653439bac2b.jpeg?width=650&format=jpg&quality=80

Could you please fix that?

[jscher2000]

Hi, when I use those links, the image opens in Firefox's "stand alone" image viewer. I cannot replicate the problem there (I'm using auto-save, if that makes a difference). Is that where you have the problem, or when the image is embedded in a page?

Note: There was a bug with file naming in the stand-alone viewer in version 1.3.1, so make sure you are up-to-date with version 1.3.2. https://addons.mozilla.org/firefox/addon/save-webp-as-png-or-jpeg/versions/

[syldub69]

Hi, I am using version 1.3.2, and using AutoSave as well. I generally use the Firefox "standalone" image viewer for converting webP images with you addon. This is the case here in my issue. Do you succeed in saving the image in JPG 100 (for instance) ?? But I think the issue occurs when the image is embedded as well.

For information the original website for this image is the following: https://www.leroymerlin.fr/produits/chauffage-plomberie/equipement-wc-et-accessoires-de-robinet/accessoires-de-robinet/mousseur-et-brise-jet-pour-robinet/mousseur-orientable-2-jets-f22-m24-chrome-male-femelle-regards-international-82586489.html?src=clk

[jscher2000]

Yes, mine auto-saved as usual.

When working with the original page, I see the larger size is a background image and the add-on doesn't appear on the right-click menu for background images. I should look into adding that, but either way, it's the saving that is your current problem.

If you change over to showing the Save As dialog, does that make any difference or is the button still "dead"?

[syldub69]

Yes, I changed over to showing the Save As dialog, and the button is still "dead".

[jscher2000]

Do the buttons that do not call the convert function do anything? Those are the ones on the second row in this screenshot:

• IE11 should send a fresh request and pop up a Save As dialog
• GIF(V) should check whether it's a .gif and display an error if it's not
• ℹ️ should show or hide the info panel
• ⚙️ should open the Options page
• X should close the button bar

Within the convert function, the script creates a file name, creates an HTML canvas, drops the image into the canvas, extracts the image with the new format, then sends the image to the Download API. There are a lot of potential points of failure and I'm not sure how you can get feedback on what is going wrong. Possibly the Web Console? If you open that using Ctrl+Shift+K (on Mac, I think it's Command+Alt+K), does it list any messages after the failure?

In order to make sure add-on-related messages are showing, you might first need to check the box for "Enable browser chrome and add-on debugging toolboxes" in the Settings panel:

Any new information there?

[syldub69]

These 4 buttons are working well. All others are dead. I have no specific message in the Browser Console. Like if I did not click on any button...

[jscher2000]

Okay, if you wouldn't mind trying the Debugger. After showing the button bar, open the Web Console, then click over to the Debugger panel. Expand the website code section until you get to the "sandbox eval code" which is the script connected to the button bar. Click line 14, assuming it's the first non-comment line in function convert_standAlone() (see images below). Then when you click a convert button, the script should pause on that line and show a kind of haze over the page. Use the Step In button to run each line of code until it fails somewhere. How far does it get?

[jscher2000]

By the way, I just noticed in your screenshot that in your case, unlike mine, the format is already image/jpeg, so you can use right-click > Save Image As... instead of using the add-on's convert button.

[syldub69]

No, it seems to be a webP image but with a .jpeg file extension... I can easily notice it, as when I open webP images with Windows Photo Viewer the image is always darker (I think Windows Photo Viewer doesn't render well webP images).

[syldub69]

Using debugger, I see it creates new filename, then creates canvas, and it goes to this : Then it exits.

[jscher2000]

Hmm, I have to click about 5 times after that step, so there's definitely a difference there.

Maybe you can test whether Firefox can generate the blob by pasting this code in the Web Console:

var w = document.querySelector('img');
// Create canvas
var canv = document.createElement('canvas');
canv.width = w.naturalWidth;
canv.height = w.naturalHeight;
var ctx = canv.getContext('2d');
// Drop in image
ctx.drawImage(w, 0, 0);
// Convert to JPEG 100% blob
canv.toBlob((blob) => {
    // Open blob in a new window instead of calling Download API
    window.open(URL.createObjectURL(blob), '_blank');
}, 'image/jpeg', 1);

If it's your first time pasting code into the Web Console, Firefox will require you to take some action to prove you understand it's dangerous to run code from strangers (which is true).

The first time you run this in a particular site, Firefox will block the popup and show a toolbar button that gives the option to open it.

Does it work?

[syldub69]

Hi, I am really sorry for the delay, I couldn't answer sooner... When pasting you code in the Web Console, it opens a new tab with the properly displayed image. URL is: blob:https://media.adeo.com/28e17246-14fe-4234-a9ea-7f78cc2a74e7

[syldub69]

Another example on another website: https://boulanger.scene7.com/is/image/Boulanger/3576160027326_h_f_l_2?wid=1000&hei=1000

[jscher2000]

It sounds like the problem is after creating the blob, it isn't downloading, but I don't know why there's a problem. You can check for errors in the background script this way:

(1) Open the about:debugging page and in the left column, click This Firefox

(2) For this add-on, click the Inspect button to open a new tab or popup window, and in that tab/window, select the Console (to prevent the popup window from staying on top and blocking your view, click the blue icon of overlapping windows on the right side)

(3) Then try saving again and if it fails, come back to the Console to see whether there is any new entry about a problem with the message or the download

[syldub69]

Hi, At step (2) when I open the Console, there is always this message: An error occurred while saving the image: filename must not contain illegal characters When I try to convert into JPG 100 (or anything else), nothing happen, nothing is written in the console... For the moment, I use your blob generation code on each image I want to download as a workaround.

[jscher2000]

In version 1.3.3, I added some more error handling to hopefully show what the bad file name was, either in that debugging console or in a popup message on the page where you clicked the button to save the image. Could you let me know what you see there?

[jscher2000]

I added some filename cleanup code recently due to #21, but I don't know whether that affects the problem on your Firefox.

[syldub69]

Hello, Now I have an error when trying to convert into JPG:

[jscher2000]

Hello, Now I have an error when trying to convert into JPG:

I don't know what character is illegal there. Windows 10 allows me to use "20a5ebdd-4b50-46d6-af05-5653439bac2b.jpeg (JPEG Image, 2000 × 1601 pixels) — Scaled_2023-07-17.jpg" as a file name if I right-click > Save Image As.

Actually everything starting with "(JPEG image" should have been removed when the file name was constructed. I don't know why that failed on that image. Do all stand-alone images have the same problem?

I can try to add some more cleanup to the stand-alone viewer file names.

I noticed you don't use the Save_webP subfolder (if you do, it appears as the first part of the file name in the error message). I always do all my testing in that subfolder to minimize clutter in my Downloads folder, but when I tested saving that image in the Downloads folder, it went smoothly as usual, so that probably is not a critical factor.

Still puzzled.

[jscher2000]

Hi, I don't know whether this is a still a problem. I have been focused on other bugs recently. Does it make any difference if you first click the image to expand it to its actual dimensions? This is just to avoid "Scaled" being part of the title of the tab since that seems to get included in the file name on your Firefox.