Question

我正在尝试阅读图像，当您使用HTML画布时，我想要获得的结果是相同的＆＃34; Uint8ClampedArray＆＃34;？ var imageData = ctx.getImageData(0, 0, width, height);我找到了一个NPM lib canvas，但我无法安装它。

那么有没有另一种方法可以不使用Canvas？

Answer 1

不要真的知道我做了什么让画布工作。我使用pixel-util来设置图像数据。

var pixelUtil = require('pixel-util'),
    Canvas = require('canvas');

var image = new Canvas.Image,

pixelUtil.createBuffer('http://127.0.0.1:8080/image/test.jpg').then(function(buffer){
    image.src = buffer;

    canvas = new Canvas(image.width, image.height);

    var ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    runImage(ctx.getImageData(0, 0, canvas.width, canvas.height));
});

Answer 2

严格回答这个问题：

那么有没有另一种方法可以不使用Canvas？

问题是，即使我们可以加载图像二进制数据，我们也需要能够解析其二进制格式，将其表示为原始像素数据（ImageData / Uint8Array个对象）。

这就是canvas模块在安装时需要编译的原因：它依赖于libpng，libjpeg和其他本地库的链接。

要从文件加载表示像素原始数据的Uint8Array，不使用画布（或本机库包装器），将需要仅在Javascript中运行的解码器。

例如有png和jpeg的解码器作为第三方库。

解码PNG

使用png.js：

const PNG = require('png-js');
PNG.decode('./image.png', function(pixels) {
   // Pixels is a 1d array (in rgba order) of decoded pixel data
});

解码JPEG

使用inkjet：

const inkjet = require('inkjet');
inkjet.decode(fs.readFileSync('./image.jpg'), function(err, decoded) {
  // decoded: { width: number, height: number, data: Uint8Array }
});

https://github.com/gchudnov/inkjet

节点JS画布图像数据

2 个答案:

解码PNG

解码JPEG