0

Simple question, how to make this code work? It's in the state where CORS is the problem. And actually, I don't think the code looks like this.

Note that the response should return a blob (Because I to save the file to the database).

<input type="url">

let input = document.querySelector('input');
input.addEventListener('change', () => {
    let xhttp = new XMLHttpRequest();
    xhttp.open('GET', input.value, true);
    xhttp.responseType = 'blob';
    xhttp.send();
    xhttp.addEventListener('readystatechange', () => {
      if(xhttp.readyState == 4 && xhttp.status == 200){
        let reader = new FileReader();
        reader.readAsDataURL(xhttp.response);
        reader.onload = () => {
          document.body.style.backgroundImage = `url(${event.target.result})`;
        }
      }
    });
});

Thank you

Edit: I already found the answer here

SnekNOTSnake
  • 1,157
  • 12
  • 24
  • https://stackoverflow.com/questions/38810956/set-background-image-to-a-blob-uri – Lain Dec 06 '19 at 14:40
  • How can I use it? I keep getting error when I'm trying to fetch an image with URL. I'm a very beginner with this thing. URL.createObjectURL('https://res.cloudinary.com/teepublic/image/private/s--ydu5TNcI--/t_Resized%20Artwork/c_fit,g_north_west,h_954,w_954/co_000000,e_outline:48/co_000000,e_outline:inner_fill:48/co_ffffff,e_outline:48/co_ffffff,e_outline:inner_fill:48/co_bbbbbb,e_outline:3:1000/c_mpad,g_center,h_1260,w_1260/b_rgb:eeeeee/c_limit,f_jpg,h_630,q_90,w_630/v1529599920/production/designs/2811974_0.jpg'); – SnekNOTSnake Dec 06 '19 at 15:05
  • Ohh, I think I found my answer. :D from [here](https://stackoverflow.com/questions/22172604/convert-image-url-to-base64) – SnekNOTSnake Dec 06 '19 at 15:20

0 Answers0