javascript - 我应该以哪种格式将图像从 Rust 传递给 JS?
问题描述
我正在尝试将图像从 JS 传递给 Rust,对其进行处理并从 Rust 返回给 JS。请帮助我了解我应该以哪种格式从 Rust 返回图像。
我的 JS 代码如下所示:
import { Image } from "image_processing";
const input = document.getElementById('image-input')
const image_canvas = document.getElementById('image-canvas')
input.addEventListener('change', async (event) => {
const buffer = await event.target.files[0].arrayBuffer();
const view = new Uint8Array(buffer);
const image = Image.new(view);
console.log('xxx1', view);
const imageBlob = image.get_image_blob();
console.log('xxx2', imageBlob);
const blob = new Blob(imageBlob, { type: 'image/jpeg'});
console.log('xxx3', blob);
image_canvas.width = image.get_width();
image_canvas.height = image.get_height();
const imageBitmap = await createImageBitmap(blob, 0, 0, image_canvas.width, image_canvas.height);
const context = image_canvas.getContext('2d');
context.drawImage(imageBitmap, 0, 0);
});
RustImage.new
和Image.get_image_blob
函数看起来像这样:
#[wasm_bindgen]
impl Image {
pub fn new(image_blob: Vec<u8>) -> Image {
let reader = Reader::new(io::Cursor::new(image_blob))
.with_guessed_format()
.expect("Cursor io never fails");
let extension = match reader.format() {
Some(extension) => extension,
None => panic!("Can't guess image extension")
};
let width;
let height;
let image = match reader.decode() {
Ok(image) => {
let (w, h) = image.dimensions();
width = w;
height = h;
image
},
Err(error) => {
panic!("Can't get image: {}", error)
}
};
Image {
image,
width,
height,
extension,
}
}
.
.
.
pub fn get_image_blob(&self) -> Vec<u8> {
match self.extension {
x if x == ImageFormat::Png => self.image.to_rgba8().to_vec(),
_ => self.image.to_rgb8().to_vec()
}
}
}
当我试图在浏览器控制台中处理 jpeg 图像时,我得到了这个:
看起来我的返回 blobget_image_blob
不正确。在我用 Rust 处理我的图像之前,它具有正确的 jpeg 文件签名:[255、216、255,...]。但处理后变成了 [162, 162, 152, ...]。我认为我应该尝试改变to_rgb8
其他方法,但我不明白为什么。你能帮我解释一下我做错了什么吗?
编辑:当我调用decode
方法时,签名会发生变化,但我仍然不知道为什么。
解决方案
decode 方法采用 JPEG 文件并将原始像素作为未压缩的内存块返回。换句话说,[162, 162, 152...] 表示右上角像素的值 red=162,green=162,blue=152。您可以使用ImageData或通过使用image::codecs::jpeg::JpegEncoder.encode或save_buffer_with_format方法对数据进行编码,从原始字节数据制作图像。有关更多信息,您可以阅读此问题。
推荐阅读
- terraform - 如何通过 bash 脚本在 terraform 中使用外部数据源
- scala - 如何强制子类型不包含超类型?
- python-3.x - 带有 tshark 或 scapy 的 Wireshark 数据包详细信息窗格信息?
- arrays - 重新索引 PHP 嵌套数组
- excel - VBA - 运行时间 1004
- plot - GNU Octave 4.4.1 中的分位数图
- ios - 错误:global.nativeTraceBeginSection 不是函数
- r - 仅绘制夏威夷群岛
- r - R 用 updateSelectInput 反应闪亮
- java - GPS 追踪器无法进入我的主活动屏幕的问题