set background-image from localStorage base64 string

Question

У меня есть функция, которая кодирует изображение в строку base64 и сохраняет его в localStorage. Я пытаюсь получить изображение из localStorage и использовать его для установки фонового изображения с помощью jQuery.

Все работает правильно, но изображение не отображается. Когда я проверяю элемент в браузере, одиночные кавычки вокруг «данных» uri не вставлены. Я не знаю, является ли это проблемой или нет.

Вот мой код

функция для кодирования и хранения изображений:

var img = document.getElementById("elephant"); 

function getBase64Image(img) { 
    // Create an empty canvas element 
    var canvas = document.createElement("canvas"); 
    canvas.width = img.width; 
    canvas.height = img.height; 

    // Copy the image contents to the canvas 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 

    // Get the data-URL formatted image 
    // Firefox supports PNG and JPEG. You could check img.src to 
    // guess the original format, but be aware the using "image/jpg" 
    // will re-encode the image. 
    var dataURL = canvas.toDataURL("image/png"); 
console.log(dataURL); 

    return dataURL;  
} 

JQuery для установки изображения:

localStorage.setItem("background" , getBase64Image(img)); 
console.log(localStorage); 

background = localStorage.getItem("background") 

console.log(background); 

$("#elephant2").css('background-image' , 'url(' +background+ ')'); 

Answer 1

Я думал, этот вопрос не хватало цитаты, но это было фактически поврежденная/неполная строка данных base64. Я поместил функцию внутри window.onload = function(), чтобы изображение полностью загрузилось до преобразования в строку, и оно работает как шарм/