Question

我试图使用localStorage保存图像，或者在以后检索多个图像以上传到服务器。

目前的相机代码如下：

function capturePhoto() {
    navigator.camera.getPicture(onCameraSuccess, onCameraFail, {quality: 70, destinationType : Camera.DestinationType.DATA_URL});
}

function onCameraSuccess(imageData) {
    //In our success call we want to first process the image to save in our image box on the screen.

    var image = document.getElementById('image');
    image.src = "data:image/jpeg;base64," + imageData;

    //Create a new canvas for our image holder

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

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

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

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

    // Save image into localStorage
    try {
    // localStorage.setItem(“savedImage”, imgAsDataURL);
    localStorage.setItem("savedImage", imageData);
    alert('Image Saved');
    }
    catch (e) {
    alert("Storage failed: " + e);
    }

    var imageStorage = localStorage.getItem("savedImage");
    // myCardHolder= document.getElementById(“m1-cardStorage-image1″);
    // Reuse existing Data URL from localStorage
    var imageInfo = document.getElementById('image');
    imageInfo.src = "data:image/jpeg;base64," + imageStorage;
}

这会触发相机，拍摄的图像会显示在

中

<img id="image" src=""></img>

它还绘制一个画布以输出图像。我真正想要实现的是捕获图像base64数据，以便能够将其存储到一个数组中，以便可以从服务器上传/下载。

理想情况下，我希望完全避免向用户显示图像，只需存储图像数据

我可能误解了localStorage / camera api，所以任何指针都会很棒。

在存储数据之前，图像是否必须输出到元素中？如果我可以将它输出到可能永远不必显示的画布中，并从canvas元素中提取数据？

Answer 1

在存储数据之前，图像是否必须输出到元素中？

完全没有，在这种情况下。您已经将图像作为base64数据接收，因此只需将其直接存储即可。

问题：

如果时间过长，可以通过浏览器切断数据
如果没有被字符串级别的浏览器切断，那么数据可以被localstorage本身切断，这有大小限制（对于大多数浏览器，我认为它目前大约为5 MB，但这里没有标准）
一个字符串每个字符使用两个字节，因此存储实际上是一半

更好的本地存储是使用indexedDB。

当您读取 base64数据时，您必须使用图像来显示数据。只需像对数据一样使用前缀：...等，并记住使用正确的文件类型。

Answer 2

去年我试图解决同样的问题，我现在没有代码，但我采用了这个答案的方法：

How to convert image into base64 string using javascript

请记住，localStorage的限制为5 MB，因此如果您在b64中保存了大量图片，则可以轻松达到该限制。（这是我的情况），所以我不得不将我的存储空间移动到其他地方，比如sqlite或类似的东西。

LocalStorage phonegap相机图像

2 个答案: