如何在 p5.js 中裁剪图像而不在屏幕上绘制图像答案

【问题标题】：How can I crop an image in p5.js without drawing image on the screen如何在 p5.js 中裁剪图像而不在屏幕上绘制图像
【发布时间】：2018-11-11 00:35:02
【问题描述】：

我研究并发现您可以使用get()“裁剪”图像，但是必须在屏幕上绘制图像，然后在其中截取画布的一部分。是否可以加载图像然后将其裁剪版本保存在变量中？所以可能是这样的：

var img;
var cropped;

function preload(){
  img = imageLoad('dog.png', crop)
}

function crop(image){
  cropped = crop(img, 0, 0, img.w/2, img.h) // Getting left half of image 
}

谢谢。

编辑：这是我使用 copy() 制作的函数，但我不知道我是否缺少更简单的方法。

function crop(image, x, y, w, h) {
  var cropped = createImage(w, h);
  cropped.copy(image, x, y, x + w, y + h, 0, 0, x + w, y + h)
  return cropped;
}

【问题讨论】：

这是什么crop()函数？我很确定您的代码会导致堆栈溢出。
这是伪代码，一个例子。

标签： javascript image crop p5.js

【解决方案1】：

您可以直接访问图像的像素。您不必先将其绘制到画布上。

首先阅读P5.Image 参考。

在高层次上，您要做的是创建一个新图形（createGraphics() 函数是您的朋友，然后在该图形上绘制您想要的图像部分。无论您绘制图像还是图形画布是否由您决定。

【讨论】：

谢谢。我能够使用 copy() 创建自己的裁剪函数。