useRef 总是以 null 的形式返回，并且无法获取图像比较中的当前值

Question

I am trying to make a react component to compare two images using the pixel match library and I am stuck on the output image. The outputCanvasRef is always null so in the compareImages function it errors on the line with outputCanvas.width = image1.width;

import { useRef, useState } from "react";
import pixelmatch from "pixelmatch";

const Tab1 = () => {
  const [image1, setImage1] = useState(null);
  const [image2, setImage2] = useState(null);
  const [difference, setDifference] = useState(null);

  const canvas1Ref = useRef(null);
  const canvas2Ref = useRef(null);
  const outputCanvasRef = useRef(null);

  const handleFileChange = (setImage) => (event) => {
    const file = event.target.files[0];
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onload = () => {
      const image = new Image();
      image.src = fileReader.result;
      image.onload = () => setImage(image);
    };
  };

  const compareImages = async () => {
    if (image1 && image2) {
      const canvas1 = canvas1Ref.current;
      const canvas2 = canvas2Ref.current;
      const outputCanvas = outputCanvasRef.current;
      canvas1.width = image1.width;
      canvas1.height = image1.height;
      canvas2.width = image2.width;
      canvas2.height = image2.height;
      outputCanvas.width = image1.width;
      outputCanvas.height = image1.height;

      const ctx1 = canvas1.getContext("2d");
      const ctx2 = canvas2.getContext("2d");
      const outputCtx = outputCanvas.getContext("2d");
      outputCtx.scale(0.5, 0.5);

      ctx1.drawImage(image1, 0, 0);
      ctx2.drawImage(image2, 0, 0);

      const diff = pixelmatch(
        ctx1.getImageData(0, 0, image1.width, image1.height),
        ctx2.getImageData(0, 0, image2.width, image2.height),
        null,
        image1.width,
        image1.height
      );

      outputCtx.putImageData(diff, 0, 0);
      setDifference(outputCanvas);
    }
  };
  

  return (
    <div>
      <input type="file" onChange={handleFileChange(setImage1)} />
      <input type="file" onChange={handleFileChange(setImage2)} />
      <button onClick={() => { compareImages() }}>Compare Images</button>
      <canvas ref={canvas1Ref} />
      <canvas ref={canvas2Ref} />
      {difference && <canvas ref={outputCanvasRef} />}
    </div>
  );
}

export default Tab1;

Answer 1

Can use the spread operator like this {...props} to pass a conditional ref

  const itemProps = difference ? { ref: outputCanvasRef } : {};

  <canvas {...itemProps} />

Answer 2

There are several things that went wrong in your implementation:

• You need to render the output canvas without any condition so that it is always available for use in the comparison function.
• the pixelmatch package requires that the images you want to compare always have the same width & height. To do this, you can use the width & height of the first image for both image 1 & image 2 canvas.
• You need to pass the array buffer that is returned from getImageData call to the pixelmatch . The getImageData returns ImageData object. You can access the array buffer like this ImageData.data
• You should pass an ImageData object's data field to the pixelmatch library's third parameter as argument so that the difference in pixels can be written in the ImageData object.

---

Solution

---

import { useRef, useState } from "react";
import pixelmatch from "pixelmatch";

const Tab1 = () => {
  const [image1, setImage1] = useState(null);
  const [image2, setImage2] = useState(null);
  const [difference, setDifference] = useState(null);

  const canvas1Ref = useRef(null);
  const canvas2Ref = useRef(null);
  const outputCanvasRef = useRef(null);

  const handleFileChange = (setImage) => (event) => {
    const file = event.target.files[0];
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onload = () => {
      const image = new Image();
      image.src = fileReader.result;
      image.onload = () => setImage(image);
    };
  };

  const compareImages = async () => {
    if (image1 && image2) {
      const canvas1 = canvas1Ref.current;
      const canvas2 = canvas2Ref.current;
      const outputCanvas = outputCanvasRef.current;
      canvas1.width = image1.width;
      canvas1.height = image1.height;
      canvas2.width = image1.width;
      canvas2.height = image1.height;

      outputCanvas.width = image1.width;
      outputCanvas.height = image1.height;

      const ctx1 = canvas1.getContext("2d");
      const ctx2 = canvas2.getContext("2d");
      const outputCtx = outputCanvas.getContext("2d");
      const diff = outputCtx.createImageData(image1.width, image1.height);

      ctx1.drawImage(image1, 0, 0);
      ctx2.drawImage(image2, 0, 0);


      pixelmatch(
        ctx1.getImageData(0, 0, image1.width, image1.height).data,
        ctx2.getImageData(0, 0, image1.width, image1.height).data,
        diff.data,
        image1.width,
        image1.height
      );

      outputCtx.putImageData(diff, 0, 0);
      setDifference(diff);
    }
  };
  

  return (
    <div>
      <input type="file" onChange={handleFileChange(setImage1)} />
      <input type="file" onChange={handleFileChange(setImage2)} />
      <button onClick={() => { compareImages() }}>Compare Images</button>
      <canvas ref={canvas1Ref} />
      <canvas ref={canvas2Ref} />
      {<canvas ref={outputCanvasRef} />}
    </div>
  );
}

export default Tab1;