Question

请查看以下P5代码。
这个小应用程序的重点是将图像拖放到画布上，根据＆＃34;上传的＆＃34;图像的宽度和高度。

/**************************************************/
//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。随后是画布尺寸的变化......导致错误，画布＆＃39;尺寸与上传的图片相同（在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

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

您拨打resizeCanvas()拨打draw()，呼叫resizeCanvas()，呼叫draw()，直到您最终收到错误为止。

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

编辑：修复该问题后，您的下一个问题是由JavaScript异步加载图片引起的。想想这一行会发生什么：

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

createImg()文件采用URL，并在代码继续执行时开始在后台加载图像。然后使用img来调整画布大小，但图像实际上尚未加载，因此宽度和高度未定义。尝试将一些值打印到控制台以查看我的意思。

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

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

Answer 2

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

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

  createP("Uploaded");
}

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

2 个答案: