Можно ли прочитать изображение с удаленного сервера, используя в двоичном режиме, используя JavaScript или PhoneGap?

Question

На самом деле в одном из моих проектов мне нужно прочитать изображения с удаленного сервера и сохранить в локальной базе данных в виде двоичного файла для использования в приложении позже. так есть ли простой способ, которым я могу это сделать? это единственное, в чем я застрял, и важно заполнить заявку. пожалуйста помоги!! Заранее спасибо.

Answer 1

Это довольно просто в среде HTML5/ES5 (практически все, кроме Internet Explorer 9-);

Сначала вам нужно загрузить двоичное содержимое изображения в буфер массива, а затем преобразовать его в datauri base64, который на самом деле является строкой. Это может быть сохранено в браузерах localStorage, indexedDb или webSQL или даже в cookie (хотя и не слишком эффективно); Позже вы просто установите этот datauri как изображение src для отображения.

<script>
    function showImage(imgAddress) {
        var img = document.createElement("img");
        document.body.appendChild(img);
        getImageAsBase64(imgAddress, function (base64data) { img.src = base64data; });
    };

    function getImageAsBase64(imgAddress, onready) {
        //get from online or from whatever string store
        var req = new XMLHttpRequest();
        req.open("GET", imgAddress, true);
        req.responseType = 'arraybuffer'; //this won't work with sync requests in FF
        req.onload = function () { onready(arrayBufferToDataUri(req.response)); };
        req.send(null);
    };

    function arrayBufferToDataUri(arrayBuffer) {
        var base64 = '',
            encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
            bytes = new Uint8Array(arrayBuffer), byteLength = bytes.byteLength,
            byteRemainder = byteLength % 3, mainLength = byteLength - byteRemainder,
            a, b, c, d, chunk;

        for (var i = 0; i < mainLength; i = i + 3) {
            chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
            a = (chunk & 16515072) >> 18; b = (chunk & 258048) >> 12;
            c = (chunk & 4032) >> 6; d = chunk & 63;
            base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
        }

        if (byteRemainder == 1) {
            chunk = bytes[mainLength];
            a = (chunk & 252) >> 2;
            b = (chunk & 3) << 4;
            base64 += encodings[a] + encodings[b] + '==';
        } else if (byteRemainder == 2) {
            chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
            a = (chunk & 16128) >> 8;
            b = (chunk & 1008) >> 4;
            c = (chunk & 15) << 2;
            base64 += encodings[a] + encodings[b] + encodings[c] + '=';
        }
        return "data:image/jpeg;base64," + base64;
    }

 </script>

Я позаимствовал процедуру преобразования base64 из этого прекрасного поста: http://jsperf.com/encoding-xhr-image-data/5