Konwertuj tablicę bajtową na dane obrazu bez płótna

Czy można w jakiś sposób przekonwertować tablicę bajtów na dane obrazu bez użycia kanwy?Konwertuj tablicę bajtową na dane obrazu bez płótna

Używam obecnie czegoś takiego, jednak myślę, że można to zrobić bez płótna, czy też się mylę?

var canvas = document.getElementsByTagName("canvas")[0]; 
var ctx = canvas.getContext("2d"); 

var byteArray = [ 
    255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, // red 
    0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, // green 
    0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255 // blue 
]; 

var imageData = ctx.getImageData(0, 0, 10, 3); 
for(var i = 0; i < byteArray.length; i+=4){ 
    imageData.data[i] = byteArray[i]; 
    imageData.data[i+1] = byteArray[i + 1]; 
    imageData.data[i+2] = byteArray[i + 2]; 
    imageData.data[i+3] = byteArray[i + 3]; 
} 

ctx.putImageData(imageData, 0, 0);

http://jsfiddle.net/ARTsinn/swnqS/

Aktualizacja

Już próbowali przekształcić go w produkt base64-uri, ale bez powodzenia:

'data:image/png;base64,' + btoa(String.fromCharCode.apply(this, byteArray));

Aktualizacja 2

Aby podzielić pytanie od problemu

Samo płótno czy to nie raczej z faktu, że oldIE (i jeszcze) nie obsługują. ... i biblioteki takie jak excanvas lub flashcanvas wydaje się nieco zbyt nadęty dla tego przypadku użycia ...

Źródło

2013-04-21 yckart

Jedynym sposobem, jak sądzę, byłoby przejście przez serwer. –

Możesz potencjalnie przekonwertować dane obrazu na base64. na przykład –

@LeeTaylor Yeh, już wiem o base64-URI, ale nie o tym, jak konwertować tablicę bajtów do kodu b64 gotowego do przechowywania danych. – yckart

canvas.getImageData zwraca obiekt imageData, który wygląda tak:

interface ImageData { 
    readonly attribute unsigned long width; 
    readonly attribute unsigned long height; 
    readonly attribute Uint8ClampedArray data; 
};

(Patrz specs: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#imagedata)

Zgaduję, że możesz umieścić swoje dane pasujące do tego interfejsu i wypróbować.

Jeśli spróbujesz, daj mi znać, jak się okazuje :)

Alternatywnie, można utworzyć w pamięci płócienną z żądaną szerokość/wysokość - document.createElement („płótno”), Następnie chwyć jego Imagedata i podłącz własną tablicę. Wiem, że to działa. Tak ... to jest sprzeczne z twoim pytaniem, ale nie dodajesz płótna do swojej strony.

Źródło

2013-04-22 00:25:30 markE

Tak, wpadłem na pomysł odbudowania interfejsu ImageData, ale jeszcze tego nie próbowałem.Nie wierzę, że to może zadziałać, ale daj mi kilka minut, a spróbuję. :) – yckart

** Aktualizacja **: Nie! Odbudowywanie interfejsu nie działa, niestety :( – yckart

Obawiałem się, że to nie zadziała, podejrzewam, że flaga "brudna" CORS jest ukryta gdzieś w obiekcie Imagedata, z drugiej strony, możesz po prostu stworzyć to, płótno pamięci i jesteś złoty!) – markE

Czy istnieje powód, dla którego nie chcesz używać płótna? Na tym właśnie polega płótno. Kiedy masz dane obrazu, co byś z nim zrobił? Renderuj to w przeglądarce? Wysłać na serwer? Pobierz do użytkownika? Jeśli problem polega tylko na tym, że nie chcesz mieć płótna na ekranie, możesz utworzyć ukryte płótno do wykonania pracy.

Źródło

2013-04-22 03:30:44

Samo płótno nie jest tak naprawdę problemem, raczej fakt, że oldIE (i jeszcze) go nie wspiera ... A biblioteki takie jak excanvas lub flashcanvas wydają się być nieco zbyt nadęty w tym przypadku użycia ... – yckart

Konwertuj tablicę bajtową na dane obrazu bez płótna

Odpowiedz

Powiązane problemy