2012-03-07 11 views
5

Düzenleme: dikkate dennmat önerisini alarak , ben Image() kullanarak birkaç satır aşağı senaryoyu edinme Resmimi basitleştirmek başarmış:XDomainRequest üzerinden ikili verileri düzgün bir şekilde okuyabilir miyim?

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); 
    } 
} 

bu Chrome ve Firefox için işe yararken, bu IE9 için değil. Aşağıdaki linkte belirtilen çözüm bu duruma uygulanmamaktadır. Uncaught Error: SECURITY_ERR: DOM Exception 18 when I try to set a cookie

Kökler, IE9 tarafından desteklenen Image() özelliğindedir mi?


Küçük bir sorunla karşılaşıyorum.

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

yukarıdaki görüntü (iki kez) 0 aşağı 255 giden 255 bayt ardından standart png başlığını içeren bir dosya, aslında. Buradaki fikir, Internet Explorer 9'un bir AJAX isteğiyle ikili veri almayı nasıl ele aldığını görmekti.

Yani, işte benim sorunum: 127'den büyük olan istemcideki bir bayt aldığımda, değerin 253 olarak varsayılan olduğunu fark ettim. IE'nin genişletilmiş baytları doğru olarak okumasının bir yolu var mı değerler? not etmeleri

birkaç nokta:

1) javascript çerçeve her türlü kullanmayın. Bunu sadece çıplak kemikler javascript ile yapmamız şart.

2) Bu denemenin amacı, bir resim elde etmek için temiz bir yol yapmaktır, böylece onu lekesiz bir tuval üzerine yerleştirebilirim. Bazen bu görüntüler harici olarak barındırılan görüntü sunucusundan gelir, diğer zamanlarda kontrolümüz olmayan başka bir ana bilgisayardan gelir. Aşağıda Ekli

benim test script:

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()' ile ilgili sorun nedir? Örnekler için bakın: https://developer.mozilla.org/en/Canvas_tutorial/Using_images – dennmat

+0

Aslında, yerleşik tarayıcıları kullanmadan JS'de görüntü verilerini manipüle etmeye, yönetmeye ve çizmeye çalışmak için kendinizi ayağa fırlatacaksınız. Bunun için yardımcı programlar. Gerçekten yavaş olacak ve muhtemelen saydamlık ve dönüşlere girdikten sonra sayısız sorunla karşılaşacaksınız. – dennmat

+0

Image() 'e son baktığımda çapraz kaynaklı desteği kaçırdım. Bahşiş için teşekkürler! Ayağımı koparmak için, yerleşik yerleşik yardımcı programlarla ne demek istediğinizi tam olarak bilmiyorum. Burada yapmayı planladığım tek şey, sunucuya atılabilen bir tuval üzerine basit bir görüntü oluşturuyor. – Axle

cevap

5

Maalesef hala "Anonim" olarak ayarlanmış crossOrigin özelliğiyle Image() nesnesini kullanarak görüntü, üzerine çizilmiş bir kez IE tuval lekeleme neden oldu.

Bundan kaçınmak için, aşağıdaki yaptım:
  1. bir url kabul benim sunucuda biraz senaryo oluşturdu, daha sonra kendisine verilen url kullanarak) (file_get_contents çağırır. Bu komut dosyasının kötüye kullanılmasını önlemek için, "kabul edilebilir" etki alanlarının bir listesini ekledim ve sonuçta ortaya çıkan URL'yi yalnızca istediği şeylere yönlendirmek için uyarladım. Bu, istekleri yerel olarak yapmamı sağlar; bu, XDomainRequest nesnesi yerine XMLHttpRequest nesnesini kullanabileceğim anlamına gelir. (aynı zamanda IE7'yi desteklemek için kapıyı açar). IE atob desteklemediği

  2. , ben base64 dönüşüm komut dosyası bulundu kullandı: How can you encode a string to Base64 in JavaScript? Ben karakterlerin gerçek dize verileri ikili olduğu gibi, encode işlevinde dışarı input = Base64._utf8_encode(input); yorumladı değil.

Bu çözüm bir "son çare" dir. Çalışır, ancak inanılmaz derecede yavaş (normal 3 saniye yerine 3 dakika sürer).En kötüsü, IE'ye, özel iletişim kutusunu ve ilerleme çubuğunu düzgün bir şekilde oluşturma şansı vermek için bir zamanlayıcıya eklemenin gerekliliğiydi. Zamanlayıcı, IE'yi bir sonraki isteği yapmadan önce bir anı duraklatmaya zorlar. Bu, isteği eşzamansız yapmak için ayarlamış olduğumu düşünürsek oldukça garip.

Şimdilik bunun için yapabileceğim en iyisi bu. Başka birinin işi bitirmek için daha iyi bir yolu varsa, cevaplarınızı göndermekten çekinmeyin.

İlgili konular