Dessiner une image à partir de tableaux de données de pixels

Question

Si j'ai un tableau de données de pixels en JavaScript, y a-t-il un bon moyen de l'afficher sur une page HTML?

• Sur les versions récentes de Safari et Firefox, je peux faire un élément <canvas> et utiliser putImageData pour afficher les pixels, mais idéalement une solution pourrait travailler sur les anciennes versions aussi bien et plus important encore, le travail sur Internet Explorer.
• Une autre solution qui semble plus tangible pourrait être d'encoder les pixels dans un format d'image standard et de créer un data: URI avec les pixels et de définir cela comme src d'un élément <img>. Malheureusement, il semble que la plupart des formats d'images sont complexes et j'ai du mal à en trouver un simple qui puisse faire l'affaire (BMP ressemble à une possibilité mais ne fonctionne pas sur Safari). En outre, les versions d'Internet Explorer antérieures à IE 8 ne prennent pas en charge les adresses URI data:.

Je doute qu'il existe, mais quelqu'un connaît-il des bibliothèques d'images pour JavaScript qui peuvent générer des images dans un format standard? Existe-t-il un moyen de répliquer la fonctionnalité d'un URI data: dans IE 7?

Answer 1

Est-ce que PNG. travailler au format pour vos cibles? Si oui PNGlib semble plutôt bien.

En outre, JS JPEG Encoder semble bon, mais il prend en entrée la valeur renvoyée de Canvas.getImageData().

Ne savez pas ce que vous pouvez faire pour prendre en charge IE 7.

Answer 2

Vérifiez que vous RAPHAEL - http://raphaeljs.com/

Bien que cela puisse être lent, et il n'est pas l'utilisation prévue de la bibliothèque, il travaillera avec le soutien pour les navigateurs qui vous intéressent

Answer 3

Peut-être vérifier sur fxCanvas http://burzak.com/pro/fxcanvas/

Je pense qu'ils mettent en œuvre même « putImageData » dans IE en utilisant Flash.

Answer 4

Canvas est une bonne solution, pour le support cross navigateur voir excellent tutoriel de Mark Pilgrim: "Qu'en est-IE"

http://diveintohtml5.ep.io/canvas.html Plus précisément, la section et en utilisant explorercanvas. Vous pouvez utiliser et créer des données: les URI aux formats png et jpeg avec canvas.