2012-03-07 21 views
5

Edit: Biorąc sugestię dennmat jest pod uwagę, że udało się uprościć mój obraz pozyskiwania skrypt do kilku linii używając Image():Czy mogę poprawnie odczytać dane binarne za pomocą 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); 
    } 
} 

Chociaż to działa dla Chrome i Firefoksa, to nie robi dla IE9. Rozwiązanie wymienione w poniższym linku nie wydaje się mieć zastosowania w tej sytuacji. Uncaught Error: SECURITY_ERR: DOM Exception 18 when I try to set a cookie

Czy funkcja CORS w Image() jest obsługiwana przez IE9?


Wpadłem na mały problem.

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

Powyższy obraz jest w rzeczywistości plik, który zawiera standardowy nagłówek PNG, a następnie 255 bajtów, począwszy od 255 do 0 (dwukrotnie). Pomysł polegał na sprawdzeniu, w jaki sposób program Internet Explorer 9 przetwarzał dane binarne za pośrednictwem żądania AJAX.

Oto mój problem: Zauważyłem, że gdy otrzymuję bajt na kliencie, który jest większy niż 127, wartość jest domyślnie ustawiona na 253. Czy istnieje sposób, aby uzyskać IE, aby odczytać rozszerzone bajty z poprawnymi wartości?

Kilka rzeczy do wzięcia pod uwagę:

1) Nie należy używać jakichkolwiek ram javascript. Jest to wymóg, że robimy to tylko z gołym kości JavaScript.

2) Celem tego eksperymentu jest stworzenie czystego sposobu na uzyskanie obrazu, aby można go było umieścić na płótnie bez jego skażenia. Czasami te obrazy pochodzą z zewnętrznego hostowanego serwera obrazu, innym razem będzie pochodził z innego hosta, nad którym nie mamy kontroli.

załączony poniżej jest mój skrypt do testowania:

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

Co jest nie tak z 'Image()'? Zobacz przykłady: https://developer.mozilla.org/en/Canvas_tutorial/Using_images – dennmat

+0

Zasadniczo będziesz strzelał sobie w nogę, próbując manipulować, zarządzać i rysować dane obrazu w JS bez korzystania z wbudowanych przeglądarek narzędzia dla niego. Będzie to naprawdę powolne i prawdopodobnie napotkasz niezliczone problemy, szczególnie gdy przejdziesz do przejrzystości i rotacji. – dennmat

+0

Musiałem przegapić wsparcie pochodzenia krzyża, kiedy ostatni raz patrzyłem na Image(). Dzięki za wskazówkę! Co do strzelania nogami, nie jestem całkowicie pewien, co masz na myśli przez wbudowane narzędzia przeglądarki. Wszystko, co zamierzam tutaj zrobić, to renderowanie prostego obrazu na płótno, które można wystrzelić na serwer. – Axle

Odpowiedz

5

Niestety, za pomocą obrazu() obiektu z właściwością crossOrigin ustawiony na „Anonymous” nadal spowodowane IE splamić płótno gdy obraz został sporządzony na nim.

Aby obejść ten problem, zrobiłem co następuje:

  1. stworzyłem mały skrypt na mój serwer, który akceptuje URL, a następnie zwraca file_get_contents(), stosując podany URL do niego. Aby zapobiec niewłaściwemu użyciu tego skryptu, dodałem listę "dopuszczalnych" domen, a także dostosowałem wynikowy adres URL tak, aby wskazywał tylko rzeczy, o które powinien prosić. To pozwala mi wykonywać żądania lokalnie, co oznacza, że ​​mogę użyć obiektu XMLHttpRequest zamiast obiektu XDomainRequest. (co również otwiera drzwi do wspierania IE7).

  2. Ponieważ IE nie obsługuje atob użyłem skrypt konwersji base64 znaleźć tutaj: How can you encode a string to Base64 in JavaScript? I wykomentowane input = Base64._utf8_encode(input); w funkcji encode, jako dane binarne było, a nie rzeczywisty ciąg znaków.

To rozwiązanie jest trochę "ostatecznością". Działa, jednak jest niesamowicie powolny (zajmuje 3 minuty zamiast zwykłych 3 sekund).Najgorszą częścią tego wszystkiego była potrzeba dodania timera, aby dać IE szansę na prawidłowe renderowanie niestandardowego okna dialogowego i paska postępu. Zegar wymusza na IE zatrzymanie się na chwilę przed wykonaniem następnej prośby. Jest to ... raczej dziwne, biorąc pod uwagę, że mam ustawione, aby żądanie było asynchroniczne.

Jest to najlepsze, na jakie mogę teraz wymyślić. Jeśli ktokolwiek ma lepszy sposób na wykonanie pracy, możesz opublikować swoje odpowiedzi.

Powiązane problemy