需要上传用户的图片输入 - P5 JavaScript 库

如何解决需要上传用户的图片输入 - P5 JavaScript 库

我有一个用P5.js编写的Sketch in Processing，但我不知道如何实现用户的输入。 该程序需要获取 .jpg 图像并且正在处理它。 我对用户输入实现的每次尝试都以空白屏幕或无休止的“正在加载...”屏幕结束。 下面是预加载图像的示例（我需要用户来做）。

let img;
let size;
let pixels = [];

function preload(){
  img=loadImage('image.jpg');  
}

function setup() {
  img.resize(windowHeight,0);
  size = img.height/2;
  createCanvas(img.width,img.height);
  background(0);
  makePixels();
  drawPortrait();
}
function makePixels(){
    for(let y=0; y<height; y+=size){
      for(let x=0; x<width; x+=size){
        let c = img.get(x,y);
        tint(c);
        pixels.push ( new Pixel (x,y,size,c) );
      }
    }
}

function drawPortrait(){
  for(let p of pixels){
    p.show();
  }
}

function drawLastFour(){
  for(let i = pixels.length-4; i<pixels.length; i++){
    pixels[i].show();
  }
}

function mouseMoved(){
  for(let i = 0; i<pixels.length; i++){
      if( (mouseX > pixels[i].x) && (mouseX <= pixels[i].x+pixels[i].s) && (mouseY > pixels[i].y) && (mouseY <= pixels[i].y+pixels[i].s) ){
        for(let py = pixels[i].y; py<pixels[i].y+pixels[i].s; py+=pixels[i].s/2){
          for(let px = pixels[i].x; px<pixels[i].x+pixels[i].s; px+=pixels[i].s/2){
            let c = img.get(px,py);
            pixels.push( new Pixel(px,py,pixels[i].s/2,c) );
          }
        }
        pixels.splice(i,1);
        break;
      }
    }
  drawLastFour();
}

解决方法

您可以使用 createFileInput 函数创建文件类型的输入元素。然后您的用户可以选择一个图像文件，您的草图可以使用该文件。这是（稍作修改的）示例代码，展示了如何使用它：

    let inputElement;
    let userImage;

    function setup() {
        inputElement = createFileInput(handleFile);
        inputElement.position(0,0);
    }

    function draw() {
        background(255);

        if (userImage != null) {
            image(userImage,width,height);
        }
    }

    function handleFile(file) {
        print(file);

        if (file.type === 'image') {
            userImage = createImg(file.data,'');
            userImage.hide();
        } else {
            userImage = null;
        }
    }