如何使用 javascript 在文档根目录外下载图像

Question

Our images are stored out of the document root, therefor we use a script to get it into the browser.

/prx/asset.php?tgt=<photo_filename>

I can display correctly the image in the web

$("#photo-editmodal").attr('src', '../prx/asset.php?tgt='+details.photo_saved_file);

The goal is be able to download that image.

I have been reading some references and the closest point I have achieved is doing a request through AJAX and then create an ObjectURL with the result, but (I think) since the stream data received, it is not a valid reference to create the ObjectURL.

Here it is my try:

                $.ajax({
                    url: '../prx/asset.php?tgt='+details.photo_saved_file,
                    method: 'GET',
                    xhrFields: {
                        responseType: ''
                    },
                    success: function (data) {
                        console.log(data);

                        var a = document.createElement('a');
                        var url = window.URL.createObjectURL(data);

                        a.href = url;
                        a.download = details.photo_saved_file;
                        document.body.append(a);
                        a.click();
                        a.remove();
                        window.URL.revokeObjectURL(url);
                    },
                    // error: function(data) {
                    //     console.log(data);
                    // }
                });

I get the message:

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

Anyone can help to get this done?

EDIT

I get rid of the ajax call and now I am doing the following:

$("#download_photo").attr('href', '../prx/asset.php?tgt='+photo);
$("#download_photo").attr('download', photo);    

The issue I have now is it works on the scond time the button is clicked. Any idea?

EDIT 2 It was much simpler than expected, still don't know why the link element can't be created with the help of ObjectURL, but I can assign the href when the "edit" modal is open and therefor the link with download attribute works at first click.

Answer 1

It was much simpler than expected, still don't know why the link element can't be created with the help of ObjectURL, but I can assign the href when the "edit" modal is open and therefor the link with download attribute works on first click.