Сохранить преобразованный двоичный код в локальной памяти браузера

Question

У меня есть php-файл «linkToThePhpFileHere.php». Это создает QR-код и возвращает что-то вроде этого:

https://i.stack.imgur.com/y7zHA.png

Вот как я показываю код:

<div style="background-image: url(linkToThePhpFileHere.php);"></div> 

Но я хочу, чтобы сохранить содержание «linkToThePhpFileHere.php» в массиве в локальном хранилище браузера, и я думаю, что это не хорошая идея сохранить там двоичный код?

Возможно использование Javascript/Jquery для загрузки и преобразования коментария моего файла. Он должен выглядеть следующим образом: https://i.stack.imgur.com/soYPr.png и быть сохранены в вар:

var str = convertToSth($.get("linkToThePhpFileHere.php")); 

Answer 1

var str = convertToSth($.get("linkToThePhpFileHere.php"));//this should be in base64 
localStorage.setItem("imgData", str); 

function getBase64Image(img) { 
 

 
    var canvas = document.createElement("canvas"); 
 
    canvas.width = img.width; 
 
    canvas.height = img.height; 
 

 
    var ctx = canvas.getContext("2d"); 
 
    ctx.drawImage(img, 0, 0); 
 

 
    var dataURL = canvas.toDataURL("image/png"); 
 

 
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
 
    } 
 

 
    function getImage(imageUrl, callback) { 
 
    var img = document.createElement("img"); 
 
    img.setAttribute('crossOrigin', 'anonymous'); 
 
    img.src = imageUrl; 
 
    img.onload = function() { 
 
     var str = getBase64Image(img); 
 
     if (typeof callback == "function") callback(str); 
 

 
    } 
 
    } 
 

 
getImage('https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg',function(imgData){ 
 
localStorage.setItem("imgData1", str); 
 
}) 
 

 
getImage('linkToThePhpFileHere.php',function(imgData){ 
 
localStorage.setItem("imgData1", str); 
 
})

Answer 2

Вы можете хранить data URI представление изображения в localStorage

window.onload =() => { 
    if (localStorage.getItem("image") === null) { 
     fetch("linkToThePhpFileHere.php") 
     .then(response => reponse.blob()) 
     .then(blob => {   
     const reader = new FileReader; 
     reader.onload =() { 
      localStorage.setItem("image", reader.result); 
      document.querySelector("div") 
      .style.backgroundImage = "url(" + reader.result + ");"; 
     } 
     reader.readAsDataURL(blob) 
     }) 
    } else { 
     document.querySelector("div") 
     .style.backgroundImage = "url(" + localStorage.getImage("image") + ")"; 
    } 
    }