2012-03-07 3 views
5

Edit: Принимая предложение dennmat их к рассмотрению, мне удалось упростить мой образ приобретения сценария до нескольких линий с использованием Image():Могу ли я правильно прочитать двоичные данные через XDomainRequest?

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 when I try to set a cookie

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


У меня возникла небольшая проблема.

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 с голыми костями.

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

Что не так с 'Image()'? См. Примеры: https://developer.mozilla.org/en/Canvas_tutorial/Using_images – dennmat

+0

Вы, по сути, будете стрелять в ногу, пытаясь манипулировать, управлять и рисовать данные изображения в JS, не используя встроенные браузеры утилиты для него. Это будет очень медленно, и вы, вероятно, столкнетесь с бесчисленными проблемами, особенно после того, как получите прозрачность и поворот. – dennmat

+0

Я, должно быть, пропустил поддержку креста в последний раз, когда посмотрел на Image(). Спасибо за совет! Что касается снятия моей ноги, я не совсем уверен, что вы подразумеваете под встроенными утилитами браузера. Все, что я намереваюсь сделать здесь, - это сделать простой образ на холсте, который можно запустить на сервер. – Axle

ответ

5

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

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

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

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

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

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

Смежные вопросы