javascript - 如何将图像存储在本地存储而不是路径中？

Question

我们可以将图像存储在本地存储中并从存储中获取图像吗？由于我们在本地存储中存储数字或字符串，我们可以存储图像而不是路径吗？ http://jsfiddle.net/sAH8w/

$(function(){
    $('#save').click(function(){
        alert('save')   
        localStorage.setItem("image", https://dl.dropboxusercontent.com/s/t2ywui846zp58ye/plus_minus_icons.png?m=);
    })

    $('#get').click(function(){
        alert('get');
        var image=localStorage.getItem("image");   
    })
})

Answer 1

You can make use of "canvas" element.

// Get a reference to the image element

var elephant = document.getElementById("elephant"); // Take action when the image has loaded

elephant.addEventListener("load", function () {

var imgCanvas = document.createElement("canvas"), imgContext = imgCanvas.getContext("2d");

// Make sure canvas is as big as the picture
imgCanvas.width = elephant.width;
imgCanvas.height = elephant.height;

// Draw image into canvas element
imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);

// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("image/png");

// Save image into localStorage
try {
    localStorage.setItem("elephant", imgAsDataURL);
}
catch (e) {
    console.log("Storage failed: " + e);
} }, false);