根据图像大小调整P5画布的大小

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。接着是画布大小的变化。。。这会导致一个错误，画布的大小与上传的图像相同（在开发者工具上选中），但不显示任何内容。

使用mouseClick（）：当禁用绘制（）上的画布大小更改并单击画布时，调整大小会完美地显示图像。

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

使现代化

这是我在删除控制台上的错误时在控制台上看到的：

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

请记住，绘制（）函数每秒调用60次。每当您调用resizeCanvas（）函数时，它也会被调用。

你调用resizeCanvas（）哪个调用draw（）哪个调用resizeCanvas（）哪个调用draw（），直到你最终得到错误。

要解决这个问题，您需要停止每帧调用resizeCanvas（）。看起来您可能可以从getFile（）函数内部调用它？

编辑：修复该问题后，下一个问题是由JavaScript异步加载图像引起的。想想这条线上发生了什么：

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

createImg（）文件获取一个URL，并在代码继续执行时开始在后台加载图像。然后您使用img调整画布的大小，但图像实际上尚未完成加载，因此宽度和高度未定义。尝试向控制台打印一些值以了解我的意思。

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

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

Answer 2

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

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

  createP("Uploaded");
}