Получить изображение с сервера, сохранить его в localStorage и отобразить его

Question

Это должно быть достаточно просто, но после нескольких часов борьбы я все еще не могу заставить его работать. Пока все мои попытки привели к тому, что изображение стало «поврежденным или усеченным», согласно Firefox.

Получить изображение с сервера с помощью вызова jquery-ajax:

 $.ajax({
                async: false,
                url: db[key]["DocumentLink"],
                success: function (result2) {

Base64 кодирует изображение и сохраняет его в localStore:
В этом примере я использую плагин jquery base64-encoding, но я пробовал несколько.

                        var dbKey = "Doc " + db[key]["ID"] + " " + db[key]["Title"];
                        console.log("storing: " + db[key]["DocumentLink"] + " in " + dbKey + "\n");
                        localStorage.removeItem(dbKey);
                        var base64Image = $.base64Encode(result2);
                        console.log(base64Image.length);
                        localStorage.setItem(dbKey, base64Image);
                       console.log("is stored: " + db[key]["DocumentLink"] + " in " + dbKey + "\n");
                }
})

Отображение изображения с URL-адресом данных:

function openImageFromDB(dbKey) {
    console.log("Trying to display image with key " + dbKey);
    var base64Img = localStorage.getItem(dbKey);
    document.getElementById("documentHolder").src='data:image/jpeg;base64,' + base64Img;
}

Соответствующий img:

 <img id="documentHolder" alt="Image view placeholder" src="" />

Однако, при каждой попытке Firefox отображает:

Image corrupt or truncated: data:image/jpeg;base64,77+977+977+977+9a<... much longer string>

Url: указывает на действительное изображение в формате jpeg, а base64Image.length и сообщение об ошибке показывают, что var / localStorage на самом деле содержит данные в кодировке base64.

Есть идеи?

Answer 1

• DEMO: http://so.lucafilosofi.com/retrieve-an-image-from-the-server-store-it-in-localstorage-and-display-it

Javascript (вызов AJAX)

function LoadImg(filename) {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {     
            document.getElementById("documentHolder").src = "data:image/png;base64," + xmlhttp.responseText;
        }
    };    
    xmlhttp.open("GET", 'load.php?LoadImg='+filename );
    xmlhttp.send(null);
}

PHP (load.php)

<?php
 if (isset($_GET['LoadImg'])) {
  header("Content-Type: image/png");
  $file = file_get_contents($_GET['LoadImg']);
  echo base64_encode($file);
}
?>

---

Прочитайте, это может помочь вам:

• Кодирование Base 64 против загрузки файла изображения
• Как кодировать данные изображения в файле HTML?
• Как можно кодировать строку в Base64 в JavaScript?
• Получить данные изображения в JavaScript?

PS: может быть, ваш Base64 не так?

Answer 2

Браузеры имеют ограничения по размеру, кроме ограничения localStorage, равного 5 МБ. Данные для <img src="data:image/jpeg;base64,..."> также ограничены и обычно намного меньше 5 МБ. Самый простой способ обойти это - просто передать имена файлов через localStorage и позволить кешированию браузеров сделать всю работу.

Answer 3

Оказывается, AJAX не может использоваться для надежной передачи двоичных данных.Решение состоит в том, чтобы запустить серверную кодировку Base64 и передать полученную строку через AJAX.

Приведенный выше php-код работает.Для тех, кто ищет решение ASP.Net / C #:

    public string Image(string relpath)
    {
        Response.ContentType = "image/jpeg";

        string base64;
        string filename = Request.PhysicalApplicationPath + relpath;
        try
        {
            using (var fs = new FileStream(filename, FileMode.Open, FileAccess.Read))
            {
                var buffer = new byte[fs.Length];
                fs.Read(buffer, 0, (int)fs.Length);
                base64 = Convert.ToBase64String(buffer);
            }
        }
        catch (IOException e)
        {
            return filename + " / " + e.Message;
        }
        return base64;
    }

Обратите внимание, что этот код НЕ БЕЗОПАСЕН, чтобы подвергать его непосредственному воздействию во внешнем мире.Я лично использую функцию-обертку, которая анализирует путь из БД.

Answer 4

Вы можете получить данные URI (которые будут содержать кодировку base 64) через JavaScript, используя элемент canvas HTML5.

        // I'm assuming here you've put the image in an <img> tag on the page already.
        // If not, you'll need to adapt this a bit, or perhaps this approach is just
        // not right for your situation.
        var image = document.getElementById('id-of-image-you-want');

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

        var ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0);
        try {
            var dataUri = canvas.toDataURL();    
        } catch (e) {
            console.log("D'oh!"); // Improve this error handling, obviously.
        }

dataUri теперь будет содержать данные uri для изображения, которые будут содержать, наряду с коротким префиксом, кодировку изображения base64.

Обязательно добавьте обнаружениедля поддержки холста.IE 8 и старше не поддерживают его.