我正在嘗試將影像從 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方法時簽名會發生變化，但我仍然不知道為什么。
uj5u.com熱心網友回復：
decode 方法接受一個 JPEG 檔案并將原始像素作為未壓縮的記憶體塊回傳。換句話說，[162, 162, 152...] 意味著右上角的像素具有值 red=162、green=162 和 blue=152。您可以通過使用ImageData或通過在image::codecs::jpeg::JpegEncoder.encode或save_buffer_with_format方法的幫助下對該資料進行編碼來從原始位元組資料制作影像。有關更多資訊，您可以閱讀本期。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/360526.html
標籤：javascript 图像处理 锈 网络组装
上一篇：ImageMagick/等：從掃描中自動去除不干凈的邊緣？
下一篇：在按鈕懸停時回應子項的更改文本