如何在不在屏幕上绘制图像的情况下裁剪 p5.js 中的图像

Question

我研究发现您可以使用来 "crop" 图片，但是必须在屏幕上绘制图片，然后在屏幕上截取 [=22] 的一部分=].是否可以加载图像然后将其裁剪后的版本保存在变量中？所以也许是这样的：

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;
}

Answer 1

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

首先通读 P5.Image 参考资料。

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

如何在不在屏幕上绘制图像的情况下裁剪 p5.js 中的图像

How can I crop an image in p5.js without drawing image on the screen

javascript

image

crop

p5.js