您如何将 P5 loadImage() 与来自 FileReader 的 React 道具一起使用？

Question

我正在尝试根据来自不同 React 组件中文件 Reader API 的输入更改图像，并将图像名称作为道具传递。

--出于某种原因，这完全不起作用。我想知道我是否在数据 URL 所在的位置正确插入文件名。

试过P5的createFileReader，也没用（忘了为什么），决定不用了，因为按钮太丑了。

如有任何帮助，我们将不胜感激！

这是P5环境：

import React from 'react'; 
import Sketch from 'react-p5';
import FileInput from '../FileInput'; 

let cvs; 
let img; 
let pg; 



export default function P5Lasso(){
const [image, setImage] = React.useState(null);
const [load, setLoaded] = React.useState(false);
 

function setup(p5, canvasParentRef) {
    cvs = p5.createCanvas(600, 600).parent(canvasParentRef);
    p5.loadImage(`${image}`, img => {image(img, 0, 0); console.log('load')});
    if (img !== null) {
        setLoaded(true); 
    } else { 
        return( console.log('load error')); }
    }

function draw(p5) {

stuff
        
    }


return (
    <div>
    <FileInput selectImage={(img) => setImage(img)} />
    {load && <div>
    <Sketch setup={setup} draw={draw} mouseReleased={mouseReleased}/> 
    </div>
    }
    </div>
    ); 
    }

这是文件 Reader:

import React, { useState, useRef } from 'react';

export default function FileInput(props) { 

const [src, setSrc]= useState(null); 
const fileInput = useRef(null);
  
const handleImageSelection = (event) => {
    props.selectImage(event.target.files[0].name); 
    console.log(event.target.files[0].name);

    let file = event.target.files[0];
    let reader = new FileReader();
    reader.onload = function (e) {
    setSrc(e.target.result);
    };
    reader.readAsDataURL(file);
};

const openFileInput = () => {
    fileInput.current.click();
  };

return (
  <div
      className="image-input"
      onClick={openFileInput}
      style={{
        width: "100%",
        height: "400px",
        border: "2px solid",
        borderRadius: "5px",
        color: "black",
  
      }}
    
    >
      <img
        style={{ height: "100%" }}
        className="loaded-image"
        src={src}
        alt=""
      />

      <label>
        <input
          ref={fileInput}
          style={{ display: "none" }}
          type="file"
          accept="image/*"
          onChange={handleImageSelection}
        />
      </label>
    </div>
 ); 
}

Answer 1

使用读取文件的结果作为数据 URI 在 FileReader 组件中调用 props.selectImage。


import React, { useState, useRef, useEffect } from 'react';

export default function FileInput(props) {
  const [src, setSrc] = useState(null);
  const fileInput = useRef(null);

  const handleImageSelection = event => {
    let file = event.target.files[0];
    let reader = new FileReader();
    reader.onload = function(e) {
      setSrc(e.target.result);
    };
    reader.readAsDataURL(file);
  };

  useEffect(() => {
    if (src) {
      props.selectImage(src);
    }
  }, [src]);

  const openFileInput = () => {
    fileInput.current.click();
  };
//...

然后在Sketch组件中，如果有图片就用它来渲染草图

import React, { useState, useRef } from 'react';
import Sketch from 'react-p5';
import FileInput from './FileInput';

let cvs;
let img;
let pg;


export default function P5Lasso() {
  const [image, setImage] = React.useState(null);
  function setup(p5, canvasParentRef) {
    cvs = p5.createCanvas(600, 600).parent(canvasParentRef);
    p5.loadImage(image, img => {
      p5.image(img, 0, 0);
    });
  }

  function draw(p5) {
  }

  function mouseReleased() {}

  return (
    <div>
      <FileInput selectImage={setImage} />
      {image && (
        <div>
          <Sketch setup={setup} draw={draw} mouseReleased={mouseReleased}/>
        </div>
      )}
    </div>
  );
}

您如何将 P5 loadImage() 与来自 FileReader 的 React 道具一起使用？

How do you use P5 loadImage() with React props from FileReader?

javascript

reactjs

p5.js