请查看以下 P5 代码。
这个小应用程序的目的是将图像拖放到画布上，并根据“上传”图像的宽度和高度改变其大小。

/**************************************************/
//GENERAL
var canvas;
//IMAGE
var img;//image
var imgW;//image width
var imgH;//image height
/**************************************************/
function setup(){
  canvas = createCanvas(710, 400);//initial canvas size
  canvas.drop(gotFile);
}
/**************************************************/
function draw(){
    background(0);
    if(img){
    image(img, 0, 0);
    imgW = img.width;
    imgH = img.height;
        if(imgW > 0 && imgH > 0){
            resizeCanvas(imgW, imgH);
        }
    }
    fill(255);
    text(imgW + ", " + imgH, 10, 10);
}
/**************************************************/
//
function gotFile(file){
  if (file.type === 'image') {
    img = createImg(file.data).hide();
  }
}
/**************************************************/
function mouseClicked(){
    if(img){
        if(imgW > 0 && imgH > 0){
            resizeCanvas(imgW, imgH);
        }
    }
}

使用 draw() ： 一旦图像成功加载（至少显示它），我就会将其宽度和高度分配给变量 imgW 和 imgH 。随后画布大小发生变化……这会导致错误，画布的大小与上传的图像相同（在 Developer Tools 上检查），但不显示任何内容。

使用 mouseClicked() ： 在 draw() 上禁用画布大小更改，然后单击画布，调整大小会完美显示图像。

应用程序需要在不单击的情况下工作，它应该在放置图像后自动更改（画布大小）。

更新

这是我在放置时在控制台上看到的内容 我在控制台上收到的错误：

Uncaught RangeError: Maximum call stack size exceeded
    at Array.map (<anonymous>)
    at p5.Color._parseInputs (p5.js:44096)
    at new p5.Color (p5.js:43147)
    at p5.color (p5.js:42827)
    at p5.Renderer2D.background (p5.js:50315)
    at p5.background (p5.js:44288)
    at draw (sketch.js:21)
    at p5.redraw (p5.js:52435)
    at p5.resizeCanvas (p5.js:51826)
    at draw (sketch.js:30)

更新 2

这是代码现在的样子，在 drop 方法上调用 resizeCanvas：

/**************************************************/
//GENERAL
var canvas;
//IMAGE
var img;
var imgW;
var imgH;
var z;
/**************************************************/
function setup(){
  canvas = createCanvas(710, 400);
  canvas.drop(gotFile); 
}
/**************************************************/
function draw(){
    background(0);
    //
    if(img){
        imgUpdate();
    }
    //debug
    fill(255);
    text(imgW + ", " + imgH, 10, 10);
}
/**************************************************/
function gotFile(file){
  if (file.type === 'image') {
    img = createImg(file.data).hide();
  }
  while (!img) {

  }
  createP("Uploaded");

  if(img)
  {
    imgUpdate();
    resizeCanvas(imgW, imgH);
  }
}
/**************************************************/
function mouseClicked(){
    if(img)
    {
        if(imgW > 0 && imgH > 0)
        {
            resizeCanvas(imgW, imgH);
        }
    }
}
/**************************************************/
function imgUpdate()
{
    image(img, 0, 0);
    imgW = img.width;
    imgH = img.height;
}
/**************************************************/