1

我正在使用 React JS 开发我的应用程序。

我知道如何在客户端/浏览器文件夹结构中导入图像

就我而言：

import maze_text from '../../mazes/images/maze_text.png';

我想阅读该 PNG 文件，以便将其传递给 PNGJS

例如

var PNG = require('pngjs').PNG

我希望它将它传递给'pngjs'，以便PNGJS可以解析整个png文件并检查图像中每个像素的颜色等。

我努力了：

var FileReader = new window.FileReader()
var imageData = FileReader.readAsArrayBuffer(maze_text)

但我收到以下错误：

Mazes.js:51 Uncaught TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.

基本上我想要实现的是使用 pngjs 将下面的 Ruby 代码转换为 Javascript 等价物，因为 Javascript 中没有 ChunkyPNG：

def self.from_png(file)
  image = ChunkyPNG::Image.from_file(file)
  mask = Mask.new(image.height, image.width)

  mask.rows.times do |row|
    mask.columns.times do |col|
      if image[col, row] == ChunkyPNG::Color::BLACK
        mask[row, col] = false
      else
        mask[row, col] = true
      end
    end
  end

  mask
end
4

1 回答 1

1 
//assuming you have a Input with "fileInput" id
var file = document.getElementById('fileInput').files[0];
var filereader = new FileReader();
filereader.onloadend = function(event) {
    new png.PNG({filterType: 4}).parse(event.target.result, function(error, image){
        if(error){return;}
        //image is the PNG image
    });
};
filereader.readAsArrayBuffer(file);
于 2020-04-01T03:23:38.837 回答