Реагируйте: Как прочитать PNG в клиенте / браузере и разобрать его в PNGJS

Question

Я использую 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'.

По сути, я пытаюсь добиться перевода приведенного ниже кода Ruby в эквивалент Javascript с использованием pngjs, поскольку в 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

Answer 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);