0

In my website I've a button that whenever user clicks on it downloads him a random image, here is the code to download an image:

const downloadImg = (src) => {
    const imgName = src.replace(/^.*[\\\/]/, '');

    var a = document.createElement('a');
    a.href = src;
    a.download = imgName;
    a.click();
};

This works completely fine from images that are from open websites, like google.com or Wikipedia commons

However, for images from websites like Pixabay, Pexels, Freepik instead of downloading the Image it opens the image URL in the same tab and gives me 403 forbidden error in the console

I completely understand why this error happens, but what I don't understand is how to fix it? If I right-clicked on the image then hit save image as no error will appear and I will be able to download the image normally, how can I do this with javascript programmatically?

Zeyad Shaban
  • 896
  • 1
  • 8
  • 23

2 Answers2

1

You can use javascript fetch to download the random selected image from url address.

Code:

JS:
<script>
function downloadImage(url, name){
  fetch(url)
    .then(resp => resp.blob())
    .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        // the filename you want
        a.download = name;
        document.body.appendChild(a);
        a.click();
        //window.URL.revokeObjectURL(url);
    })
    .catch(() => alert('An error sorry'));}</script>

HTML:<button onclick="downloadimage('https://pixabay.com/get/g2cc1f3e1fe58926edc20db6cf67be6dd1614d93b06e934118288e4c57d5228c60c50de32506ac83ffdabc6fe20a6a01b3c7504b82965e6043e9038185180f3ae_1920.jpg', 'download.jpg')" >download</button>

example: https://viena.lovestoblog.com/bakDownload/bak.php

Edwin Tigor
  • 7
  • 2
0

It works using the approach from accepted answer here: Chrome 65 blocks cross-origin <a download>. Client-side workaround to force download? , with a minor change. Instead of using mode "cors" use "no-cors". Apparently there is a cors error with some domains when downloading directly from url.

Updated: It does not work if the server does not allow cros-origin requests. Making the request with "no-cors" will succeed, but the response body will not be available. So this is NOT a solution.

Igor Moraru
  • 7,089
  • 1
  • 12
  • 24
  • Thanks for helping, unfortunately, this isn't working, it's forcing the download but when I try to open the image it gives me an error `The file “fileName.jpeg” could not be opened because it is empty` Any idea how to fix it? – Zeyad Shaban May 15 '21 at 12:16
  • 1
    I was too eager. I think the "problem" is at the server side. If there is no "Access-Control-Allow-Origin" sent from the server, then the browser will not allow you to download the resource from your origin. You can make requests with "no-cors" but you will not be able to see the response. For now, I don't think there is a way to overcome this :( – Igor Moraru May 15 '21 at 12:44
  • Oh :( Well Thanks for helping, appreciate your time – Zeyad Shaban May 15 '21 at 12:48