在 p5 中调整 canvas 的大小而不清除内容，而是将其映射到新的大小

Question

访问这个 link 到运行 p5 网络编辑器中的代码 here

function setup() {
  createCanvas(280, 280);
  background(0);
}

function draw() {
  strokeWeight(25);
  if (mouseIsPressed) {
    stroke(255);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}


function predict() {
  resizeCanvas(28, 28);
}

尝试实现一个数字分类器，用户将在其中绘制数字，神经网络将进行分类，但神经网络需要一个 28x28 图像，因为它是用该维度 MNIST 数据集的图像训练的，但问题是如果canvas 是小用户将无法绘制任何东西，所以我想要的是将 canvas 的大小调整为 28x28 尺寸，然后加载 canvas 的像素并执行剩余的过程。但是当我这样做时，canvas 被清除，所以关于如何不丢失绘图而是将其映射到新维度的任何建议。

或者这可能不是首先调整 canvas 大小和加载像素的好方法所以也欢迎任何其他这样做的想法。感谢任何帮助。

Answer 1

您可以在另一个已经具有所需尺寸的图形对象中绘制主要 canvas 的内容，然后操作其像素数组：

let cnv
function setup() {
  cnv = createCanvas(280, 280);
  background(0);
}

function draw() {
  strokeWeight(25);
  if (mouseIsPressed) {
    stroke(255);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

function predict() {
  //Auxiliar graphics object
  let resized = createGraphics(28, 28)

  //Draw and scale the canvas content
  resized.image(cnv, 0, 0, 28, 28)
  
  //Manipulate the new pixels array
  resized.loadPixels()
  console.log(resized.pixels)

  // Draw the 28x28 just for visual feedback
  image(resized, 0, 0) 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

<button onClick="predict()">PREDICT</button>

在 p5 中调整 canvas 的大小而不清除内容，而是将其映射到新的大小

resize canvas in p5 without clearing the content but rather mapping it to new size

javascript

processing

machine-learning

p5.js