samedi 4 septembre 2021

Change file name of image with URL source

I've been working on a web app that uses GIPHY API for searching and displaying GIFS. The app is working fine but I have a problem: when downloading any of the GIFs displayed, the filename is always the same: "200.gif"

I want to change that file name. I tried inserting the container inside of a container and using the <download="filename"> but I think that this doesn't work with URL src images.

I read something about using Blob files but I failed every attempt of doing that. Any help is appreciated, thanks!

Container of the GIFS in HTML:

<div class="result_box">
  <span id="gif"></span>
</div>

JS function that displays the GIFS:

function pushToDOM(response) {
  response = JSON.parse(response);
  let container = document.getElementById("gif");
  let images = response.data;
  container.innerHTML = "";
  var received_gifs = [];

  console.time("Gifs recovery");
  images.forEach(function (image) {
    console.log("recovered gif from data");
    let src = image.images.fixed_height.url;
    let gif_temp = "<img src='" + src + "' class='container-image' />";
    console.log(gif_temp);
    received_gifs.push(gif_temp);
  });
  console.log("all gifs recovered");
  console.timeEnd("Gifs recovery");

  console.time("Gifs display");
  for (let i = 0 ; i < received_gifs.length ; ++i) {
    console.log("sending gif to container");
    container.innerHTML += received_gifs[i];
  }
  console.log("all gifs sent to container");
  console.timeEnd("Gifs display");
}

For anyone wondering, this is what the URLs of the GIFs looks like:

https://media4.giphy.com/media/26uTsIBMIJsaXM4qQ/200.gif?cid=e1bb72ffynzgixrj5ijk7u60fb06rc48fca39ne0tf9rdw2h&rid=200.gif&ct=g



Aucun commentaire:

Enregistrer un commentaire