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.
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();
}
Co jest nie tak z 'Image()'? Zobacz przykłady: https://developer.mozilla.org/en/Canvas_tutorial/Using_images – dennmat
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
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