如何使用HTML和JavaScript显示原始图像数据? [英] How to display raw image data with html and 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
为你尝试= =
所有你必须确保你的字符串是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 =)
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屋!