参考 p5.Image

p5.Image

描述图像的类。

图像是可以显示和修改的矩形像素网格。

现有图像可以通过调用 loadImage() 加载。空白图像可以通过 调用 createImage()创建。 p5.Image 对象包含常见的图像操作方式,例如使用滤镜和修改像素值。

示例

语法

p5.Image(width, height)

参数

width
height

方法

pixelDensity

获取或设置高像素密度显示器的像素密度。

默认情况下,密度将设置为 1。

不带参数调用此方法来获取默认密度,或者传递一个数字来设置密度。如果提供非正数, 默认为 1。

loadPixels

将图像中每个像素的当前值加载到 img.pixels 数组。

img.loadPixels() 必须在读取或修改像素值之前调用。

updatePixels

使用 img.pixels 数组中的 RGBA 值更新画布。

在更改 img.pixels 数组后,才需要调用img.updatePixels()。 在调用 img.loadPixels() 或调用 img.set() 后,可以直接更改。

可选参数xywidthheight定义要更新图像的子部分。在一些情况下,这样做可以提高性能。

如果图像是从 GIF 加载的,调用 img.updatePixels()将更新当前帧中的像素。

get

从图像中获取一个像素或像素区域。

img.get() 很容易使用,但速度不如 img.pixels。使用 img.pixels 读取多个像素 值。

不带参数的 img.get() 版本会返回整个图像。

带有两个参数的 img.get() 版本,例如在 img.get(10, 20)中, 可以将两个参数解释为坐标。它返回一个[R、G、B、A]定点像素值的数组。

具有四个参数的 img.get() 版本,例如在 img,get(10, 20, 50, 90)中,将四个参数解释为 坐标和尺寸。前两个参数是分段左上角的坐标。最后两个参数是 该分段的宽度和高度。它返回了新 p5.Image 对象中画布的一个分段。

使用img.get()代替get() 来直接处理图像。

set

设置图像中一个或多个像素的颜色。

img.set() 很容易使用,但速度不如 img.pixels。使用 img.pixels 设置多个像素 值。

img.set() 将前两个参数解释为 x 和 y 坐标。它 将最后一个参数解释为灰度值,一个 [R, G, B, A] 像素 数组、一个 p5.Color 对象或 p5.Image 对象。

使用img.set() 显示更改后,必须要调用img.updatePixels()

resize

将图像大小调整为给定的宽度和高度。

可以通过为任一参数widthheight 传递 0,来保留图像的原始长宽比 。例如,调用 img.resize(50, 0) 会让一张大小为 500 × 300 像素图片调整为 50 × 30 像素。

copy

将像素从源图像复制到此图像。

第一个参数srcImage是可选的要复制的 p5.Image 对象。如果源 图像没有通过,那么 img.copy() 就可以将该图像的某个区域复制到 其他区域。

接下来的四个参数,sxsyswsh 确定源图像复制区域。 (sx, sy) 是区域的左上角。 swsh 是区域的高度和宽度。

接下来的四个参数,dxdydwdh确定复制此图像的区域。 (dx, dy) 是区域的左上角。 dwdh 是区域的高度和宽度。

如果源像素区域与目标区域大小不同,调用 img.copy() 缩放。

mask

用另一个图像遮盖图像的一部分。

img.mask() 使用另一个 p5.Image 对象的 Alpha 通道作为该图像的 Alpha 通道。遮盖是累积的 并且一旦应用就无法删除。

filter

对图像应用图像滤镜。

预设选项是:

INVERT 反转图像中的颜色。不使用任何参数。

GRAY 将图像转换为灰度图像。不使用任何参数。

THRESHOLD 将图像转换为黑白图像。具有灰度值的像素 高于给定阈值的颜色将转换为白色。其余的都转换为黑色。阈值必须介于 0.0(黑色)和 1.0(白色)之间。如果没有指定阈值,使用0.5。

OPAQUE 将 Alpha 通道设置为完全不透明。不使用任何参数。

POSTERIZE 限制图像中的颜色数量。每个颜色通道仅限于 指定的颜色数量。 2 到 255 之间的数量是有效的,但是数量越低,结果越显著。默认值为 4。

BLUR 模糊图像。模糊程度由模糊半径指定。 较大数量值会增加模糊度。默认值为 4。在 P2D 模式中,使用高斯模糊。 在WEBGL 模式中,使用框模糊。

ERODE 减少光照区域。不使用任何参数。

DILATE 增加光照区域。不使用任何参数。

blend

将另一幅图像中的像素区域复制到该图像中。

第一个参数srcImagep5.Image 对象进行混合。

接下来的四个参数,sxsyswsh 确定源图像的混合区域。 (sx, sy) 是区域的左上角。 swsh 是区域的宽度和 高度。

接下来的四个参数,dxdydwdh确定要融入的画布区域。 (dx, dy) 是区域的左上角。 dwdh 是区域的宽度和 高度。

第十个参数,blendMode,设置混合图像颜色的效果。选项有BLENDDARKESTLIGHTESTDIFFERENCEMULTIPLYEXCLUSIONSCREENREPLACEOVERLAYHARD_LIGHTSOFT_LIGHTDODGEBURNADD,或NORMAL

save

将图像保存到文件。

默认情况下,img.save() 将图像保存命名为 untitled.png 的PNG 图像。

第一个参数filename是可选的。这是一个字符串设置的文件名。如果包含文件扩展名,例如 "img.save('drawing.png'),则图像将使用这种方式保存。

"

第二个参数扩展名也是可选的。它设置 文件格式。 "可以使用 'png''jpg'。例如," "img.save('drawing', 'jpg') 将画布保存到命名为 drawing.jpg 的文件。

"

注意:浏览器将立即保存文件或弹出对话窗口提示用户。

如果图像来自 GIF 文件,图像只会下载为动画 GIF 。请参阅 saveGif() 来 创建新的 GIF。

reset

从第一帧重新播放 GIF 动画。

getCurrentFrame

从 GIF 动画获取当前帧的索引。

setFrame

在 GIF 动画中设置当前帧。

numFrames

在 GIF 动画中返回帧数。

play

播放因为 img.pause() 暂停的 GIF 动画。

pause

暂停 GIF 动画。

GIF 可以通过调用 img.play() 来恢复。

delay

更改 GIF 动画中帧之间的延迟。

第一个参数delay是延迟的毫秒长度。

第二个参数index是可选的。如果提供的话, 仅修改在index 帧的延迟。所有其他帧将保持他们的默认延迟。

Notice any errors or typos? Please let us know. Please feel free to edit src/image/p5.Image.js and open a pull request!

相关参考