Могу ли я правильно прочитать двоичные данные через XDomainRequest? - PullRequest
Новая
       43

Могу ли я правильно прочитать двоичные данные через XDomainRequest?

5 голосов
/ 07 марта 2012

Редактировать: принимая во внимание предложение dennmat, мне удалось упростить сценарий получения изображений до нескольких строк, используя Image(): 

window.onload = function(){
    var img;
    capture_canvas          = document.createElement('canvas');
    capture_canvas.width    = 1000;
    capture_canvas.height   = 1000;
    document.documentElement.appendChild(capture_canvas);
    img = new Image();
    img.crossOrigin = "Anonymous";        
    img.src = "http://www.shangalulu.com/get_resource_no_64.php?url=http://www.shangalulu.com/users/1196739508/post/41-1330377498/41-1330377498_thumb.jpg";
    img.onload = function() {
        var context, canvas_img;
        context = capture_canvas.getContext('2d');
        context.drawImage(img, 0, 0, 255, 255);
        canvas_img = context.getImageData(0, 0, capture_canvas.width, capture_canvas.height);
    }
}

Хотя это работает для Chrome и Firefox, это недля IE9.Решение, упомянутое в следующей ссылке, похоже, не относится к этой ситуации. Uncaught Error: SECURITY_ERR: DOM Exception 18, когда я пытаюсь установить cookie

Поддерживается ли функция cors в Image() поддерживаемой IE9?

I 'Мы столкнулись с крошечной проблемой.

http://www.shangalulu.com/get_resource_no_64.php?url=http://www.shangalulu.com/resources/images/sample/sample.png

Это изображение на самом деле представляет собой файл, содержащий стандартный заголовок png, за которым следуют 255 байтов, идущих от 255 до 0 (дважды).,Идея состояла в том, чтобы посмотреть, как Internet Explorer 9 обрабатывает получение двоичных данных через запрос AJAX.

Итак, вот моя проблема: я заметил, что когда я получаю на клиенте байт, который больше 127, значениепо умолчанию 253. Есть ли способ заставить IE читать расширенные байты с правильными значениями?

Несколько вещей, на которые следует обратить внимание:

1) Мы не используем никакой сортировкирамок JavaScript.Требуется, чтобы мы делали это только с помощью javascript с голыми костями.

2) Цель этого эксперимента - создать чистый способ получить изображение, чтобы я мог разместить его на холсте, не испортив его.Иногда эти изображения поступают с нашего внешнего сервера изображений, а иногда - с другого хоста, который мы не можем контролировать.

Ниже приведен мой сценарий тестирования: 

var request;
window.onload = function(){
    request = new XMLHttpRequest();
    if (window.XDomainRequest) {
        request = new XDomainRequest();
    }
    request.open('GET', 
        "http://www.shangalulu.com/get_resource_no_64.php?url=
         http://www.shangalulu.com/resources/images/sample/sample.png", true);
    request.onload  = function()
    {
        var binary, i, response;
        response = this.responseText;
        binary = "";
        if (this.contentType)
        {
            document.documentElement.appendChild(
                document.createTextNode(this.contentType));
            document.documentElement.appendChild(document.createElement('br'));
        }
        for( i=0; i < response.length; i++) {
            binary = "Line " + (i) + " --> " + ((response.charCodeAt(i)) & 0xff);
            document.documentElement.appendChild(document.createTextNode(binary));
            document.documentElement.appendChild(document.createElement('br'));
        }
    };
    request.send();
}

1 Ответ

5 голосов
/ 12 марта 2012

К сожалению, использование объекта Image () со свойством crossOrigin, установленным в «Anonymous», все еще заставляло IE портить холст после того, как на него было нарисовано изображение.

Чтобы обойти это, я сделал следующее:

  1. Я создал небольшой скрипт на моем сервере, который принимает URL-адрес, а затем вызывает file_get_contents () с использованием указанного ему URL-адреса.Чтобы предотвратить неправильное использование этого скрипта, я добавил в список «приемлемых» доменов, а также настроил результирующий URL-адрес, чтобы он указывал только на то, для чего он должен запрашивать.Это позволяет мне делать запросы локально, что означает, что я могу использовать объект XMLHttpRequest вместо объекта XDomainRequest.(что также открывает двери для поддержки IE7).

  2. Поскольку IE не поддерживает atob, я использовал найденный здесь скрипт преобразования base64: Как можно кодировать строку в Base64в JavaScript? Я закомментировал input = Base64._utf8_encode(input); в функции encode, поскольку данные были двоичными, а не действительной строкой символов.

Это решение немного"последней инстанции".Это работает, однако это невероятно медленно (занимает 3 минуты вместо обычных 3 секунд).Худшая часть всего этого была необходимость добавить в таймер, чтобы дать IE возможность правильно визуализировать пользовательское диалоговое окно и его индикатор выполнения.Таймер заставляет IE сделать паузу на секунду, прежде чем сделать следующий запрос.Это ... довольно странно, учитывая, что у меня настроено асинхронное выполнение запроса.

Это лучшее, что я могу предложить на данный момент.Если у кого-то еще есть лучший способ выполнить работу, не стесняйтесь размещать свои ответы.

...