LocalStorage phonegap camera image

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/камера API немного, поэтому любые указатели было бы здорово.

Должно ли изображение быть выведено в элемент до того, как данные могут быть сохранены? Если бы я мог просто выводить его на холст, который, возможно, никогда не нужно показывать, и извлекать данные из элемента холста?

Answer 1

В прошлом году я пытался решить ту же проблему, у меня нет кода прямо сейчас, но я последовал вид подхода, принятого на этот ответ:

How to convert image into base64 string using javascript

Помните, что LocalStorage имеет предел в 5 МБ, поэтому, если вы сохраните много изображений в b64, вы можете легко достичь этого предела. (что было моим делом), поэтому мне пришлось переместить мое хранилище в другое место, например, sqlite или что-то в этом роде.

Answer 2

Должно ли изображение быть выведено в элемент до того, как данные могут быть сохранены?

В любом случае, в любом случае. Вы уже получаете изображение как данные base64, поэтому просто храните его напрямую.

Проблемы:

1. datauris может быть нарезанной браузером, если слишком долго
2. если не рубленые браузером на уровне строки, данные могут быть рубленые самой LocalStorage, который имеет ограничение на размер (я думаю, это в настоящее время около 5 Мб для большинства браузеров, но нет стандарта здесь)
3. строка использует два байта на гольца, так что хранение в действительности половина

лучший местный Storag e - использовать индексированный DB.

Когда вы читаете данные base64, вам необходимо использовать Изображение, чтобы отобразить данные. Просто префикс, как и с данными: ... и т. Д., И не забудьте использовать правильный тип файла.