Jak wczytać załadowany obraz do obiektu typu blob?

Question

Powiel możliwe:
How to convert an image object to a binary blob

Jestem stoi ograniczenia polityki tego samego pochodzenia podczas ładowania obrazów zdalnych. Jednak obiekt obrazu DOM 0 może być użyty do załadowania zdalnego zasobu (jest to zasadniczo to samo co tworzenie znacznika <img />).

var fr = new FileReader(), 
    img = new Image(); 

img.src = 'http://distilleryimage8.s3.amazonaws.com/6cf25568491a11e2af8422000a9e28e9_7.jpg'; 

img.onload = function() { 
    // how to get this image as a Blob object? 
}; 

Czy istnieje sposób na odczytanie tego zasobu do obiektu Blob/arraybuffer? To nie jest duplikat How to convert an image object to a binary blob, ponieważ ten drugi nie powstaje z problemami z tym samym początkiem.

Answer 1

Moim zdaniem można to osiągnąć bez większego bólu ...

Wystarczy jeden element HTML5. Podczas korzystania z canvas można narysować na nim zdalny obraz. Po uzyskaniu obrazu dataUrl jest dość łatwe, masz taką funkcję z interfejsu API obszaru roboczego. Następnym krokiem jest użycie metody FileReadera o nazwie readAsDataURL.

Nie próbowałem tego, ale teoretycznie powinno działać.

• Edycja: Nie zadziała. Jeśli obraz pochodzi z innego źródła, nie można użyć metody płótna toDataURL. Więc nie sądzę, że istnieje rozwiązanie bez strony serwera.