点击此链接可在p5网页编辑器中运行代码 这里
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);}
我正在尝试实现一个数字分类器,用户可以绘制数字,然后神经网络会对其进行分类,但神经网络需要28×28的图像,因为它是在MNIST数据集上训练的,而该数据集的图像尺寸是28×28。如果画布太小,用户将无法绘制任何内容,因此我希望将画布调整到28×28的尺寸,然后加载画布的像素并继续后续处理。但是当我这样做时,画布上的内容会被清除,所以有什么建议可以不丢失绘图内容,而是将其映射到新尺寸吗?
或者,也许一开始调整画布大小并加载像素并不是一个好方法,所以欢迎任何其他建议。感谢您,任何帮助都将不胜感激。
回答:
您可以将主画布的内容绘制到另一个已经具有所需尺寸的图形对象中,然后操纵其像素数组:
let cnvfunction setup() { cnv = createCanvas(280, 280); background(0);}function draw() { strokeWeight(25); if (mouseIsPressed) { stroke(255); line(mouseX, mouseY, pmouseX, pmouseY); }}function predict() { //辅助图形对象 let resized = createGraphics(28, 28) //绘制并缩放画布内容 resized.image(cnv, 0, 0, 28, 28) //操纵新的像素数组 resized.loadPixels() console.log(resized.pixels) //仅仅为了视觉反馈,绘制28x28的图像 image(resized, 0, 0) }
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script><button onClick="predict()">预测</button>