Convertir PictureStream à la toile HTML5

Question

Je récupère un tableau d'octets d'un pictureStream d'un webservice .net. la réponse du tableau d'octets JSON ressemble à ceci:

[137, 80, 78, 372, 617 more...] 

Je suis en train de convertir ce tableau d'octets et d'en tirer dans une toile HTML comme ceci

var context = document.getElementById('boxcover').getContext('2d'); 
context.putImageData(movies.PictureStream, 0, 0); 

Mais cela ne fonctionne pas. Je n'ai pas accès à modifier le webservice, donc je cherche à convertir ce tableau d'octets en une image en utilisant Javascript seulement. En outre, je ne peux pas utiliser les scripts côté serveur, côté client uniquement.

Merci pour l'aide

Voici un exemple de la façon dont le tableau d'octets est disponible en: http://www.copypastecode.com/33072/

Answer 1

Il dépend ce qui est exactement dans le tableau d'octets. S'il s'agit d'une série de valeurs RVB ou RVBA, vous pouvez utiliser getImageData/putImageData pour le dessiner tel que Kieranmaine mentionné.

Mais si le tableau d'octets est tout simplement les données à partir d'un jpeg ou autre format d'image, vous ne sera probablement pas en mesure d'accéder aux données de pixels individuels de cette manière. Dans un tel cas, vous pouvez essayer de le convertir en base 64 pour créer un dataURI, en créant un élément image, en définissant la source sur ce dataURI et en utilisant drawImage pour le placer sur le canevas.

Pour convertir à partir d'un tableau d'octets à un URI de données, vous aurez besoin de connaître le type mime d'abord. Mais si vous le savez, essayez ce code.

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

Après avoir défini l'attribut src de l'élément img il est possible que vous devrez peut-être attendre pour son événement de chargement au feu avant d'appeler la méthode drawImage() du contexte.

Answer 2

Vous devez récupérer les données d'image de la toile en utilisant la méthode getImageData (x, y, largeur, hauteur puis modifiez chaque pixel avec les valeurs de votre tableau d'octets.

J'ai créé une petite démo qui attire rouge, vert et bleu 3 pixels de longues lignes en appelant getImageData et mettre à jour les données d'image en utilisant un tableau d'octets. Voici l'url:

http://jsfiddle.net/WXfPF/1/

Voir aussi cette réponse pour plus d'informations getPixel from HTML Canvas?.