根据图像大小调整 P5 Canvas 的大小

Question

请看下面的 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;
}
/**************************************************/

Answer 1

问题是图像数据的异步加载。您可以使用loadImage() 方法，利用成功回调并像这样编写gotFile：

function gotFile(file){
  if (file.type === 'image') {
    img = loadImage(file.data, 
                    function(){
                      imgUpdate();
                      resizeCanvas(imgW, imgH);
                    });
  }

  createP("Uploaded");
}

Answer 2

请记住，draw() 函数每秒被调用 60 次。每当您调用 resizeCanvas() 函数时也会调用它。

你调用resizeCanvas() 调用draw() 调用resizeCanvas() 调用draw() 直到你最终得到你的错误。

要解决此问题，您需要停止每帧调用resizeCanvas()。看来您可以改为从 gotFile() 函数内部调用它？

编辑：在解决了这个问题之后，您的下一个问题是由于 JavaScript 异步加载图像这一事实引起的。想想这一行发生了什么：

img = createImg(file.data).hide();

createImg() 文件获取一个 URL，并在您的代码继续执行时开始在后台加载图像。然后你使用img 来调整画布的大小，但是图像实际上还没有完成加载，所以宽度和高度是未定义的。尝试将一些值打印到控制台以了解我的意思。

要解决此问题，您需要等到图像实际加载完毕。我认为您正在尝试使用 while 循环来做到这一点，但请注意，您的循环并没有做太多，因为 img 将始终在第一次定义。在使用之前，您需要更深入一层并检查图像的宽度和高度。

您还可以使用p5.File 引用在继续之前检查文件类型，并执行诸如在图像加载时显示进度条之类的操作。