Javascript 获取Uint8ClampedArray中像素数组的宽度高度

发布于03月19日

我在Deno上使用TypeScript.我试着用blurhash.

这是我的代码:

const response = await fetch(url);
if (!response.body) {
throw new Error("Body null");
}

const clamped = new Uint8ClampedArray(await response.arrayBuffer());
var blurhash: string = encode(clamped, width, height, 4, 4,);

其中width和height是预先知道的.但我得到了这样的错误:

Width and height must match the pixels array个

我读到这个issue，它似乎缺少Alpha通道之类的东西.问题是，所有的解决方案都通过使用sharp和ensureAlpha()来修复它.但是sharp不是在Deno上运行的，所以我不能使用它.

有人知道我该怎么解决吗？

推荐答案

您正在使用的blurhash库需要一个格式为[R, G, B, A]的原始位图像素的Uint8Array.在这里，你将整个png文件，包括它的头，它的元数据和压缩的像素数据.

您将需要实际读取该图像文件，以便访问该原始位图数据.有各种库可以做到这一点，我让你 Select 一个，但不幸的是，deno需要CSP规则，我们在StackSnief这里没有，所以我不能做一个现场演示.

import * as blurhash from "https://esm.sh/blurhash";
// Or any other library
import decode from "https://deno.land/x/wasm_image_decoder@v0.0.7/mod.js";

const response = await fetch(url);
if (!response.body) {
  throw new Error("Body null");
}
const fileBuffer = await response.arrayBuffer();
const { data, width, height } = await decode(fileBuffer);
const hash = encode(data, width, height, 4, 4,);
console.log(hash);