如何使用HTML和JavaScript显示原始图像数据？ [英] How to display raw image data with html and javascript?

问题描述

我有一个ajax应用程序，PHP端发送未编码的原始图像数据，从相机发送到客户端JavaScript端。

我想显示通过html和javascript使用 img 或 canvas 标签的图像。

图像数据是32 * 32 unsigned char。

我想做，无论实现我的目标（编码或其他），但我想我不能在服务器端处理任何其他操作。

我试图将原始数据编码为jpeg或png数据，但没有成功。

发布一个不起作用的示例：

  var encoder = new JPEGEncoder（9）; 
 var jpgFile = encoder.encode（rawImage，9）; 
 document.getElementById（image）。src = jpgFile; 
  

jpgFile 就像

  data：image / jpeg; base64，/ 9j / 4AAQSkZJRgABAQAAAQABAAD / 2wCEAFk9Q05DOFlOSE5kXllphd6QhXp6hf / CzaHe /////////////// /////////////////////////////////// 8BXmRkhXWF / 5CQ //////////// ////////////////////////////////////////////////// ///////////// AABEIAAAAAAMBEQACEQEDEQH / xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29 / J5 + gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4 + Tl5ufo6ery8 / T19vf4 + FR / 2gAMAwEAAhEDEQA / AP8A / 9K = 
  

我实习了JPEGEncoder googling

解决方案

为你尝试= =

http://jsfiddle.net/bYGum/

所有你必须确保你的字符串是base64编码的，并且做了与你已经写过的完全一样的事情：

  document.getElementById （ 图像）SRC = JPG文件。 
  

I have an ajax application where the PHP side sends uncoded raw image data, coming from a camera, to the client javascript side.

I would like to display the image via html and javascript using img or canvas tags.

Image data are 32*32 unsigned char.

I would like to do, whatever it takes to reach my goal (encoding or everythig else), but I want to do it at client side beacause I cannot handle any other operation at the server side.

I tried to encode raw data into jpeg or png data but without success.

I post an example that doesn't work:

var encoder = new JPEGEncoder(9);
var jpgFile = encoder.encode(rawImage, 9);
document.getElementById("image").src = jpgFile;

jpgFile is like

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAFk9Q05DOFlOSE5kXllphd6QhXp6hf/CzaHe//////////////////////////////////////////////////8BXmRkhXWF/5CQ///////////////////////////////////////////////////////////////////////////AABEIAAAAAAMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AP8A/9k=

I got JPEGEncoder googling on internet.

解决方案

Tried it for you =)

http://jsfiddle.net/bYGum/

All you have to do is make sure your string is base64 encoded and do the exact same thing you have already written:

document.getElementById("image").src = jpgFile;

这篇关于如何使用HTML和JavaScript显示原始图像数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！