javascript - HTML Canvas 允许用户从文件加载图像

Question

我正在尝试在我的 Canvas 上创建一个功能，用户可以单击加载按钮，允许他们从计算机上的任何文件加载图像，并加载图像以填充 Canvas 。我已将迄今为止所掌握的内容包含在下面:

function loadTool() {
  var img;
  this.name = "loadTool";
  this.icon = "assets/loadButton.png";
  img = loadImage("assets/star.png");

  this.draw = function() {
    background(img, 0, 0);
  }
}

我正在使用 p5.js 库。我希望允许用户选择保存在计算机上的自己的图像，并用图像填充 Canvas ，而不是从 loadImage 手动加载图像。

Answer 1

您可以使用 P5.dom 帮助程序库提供的 createFileInput() 函数。

来自the reference :

var input; 
var img; 

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

function draw() { 
  if (img) { 
    image(img, 0, 0, width, height); 
  } 
} 

function handleFile(file) { 
  print(file); 
  if (file.type === 'image') { 
    img = createImg(file.data); 
    img.hide(); 
  } 
}