p5.js 图片 resize() 方法

p5.js 中 p5.Image 的resize() 方法用于将图像调整为给定的宽度和高度。通过使用 0 作为宽度和高度的值之一，可以按比例缩放图像。

句法：

resize( width, height )

参数：此函数接受两个参数，如上所述和如下所述。

• width：它是一个数字，指定调整大小的图像的宽度。
• height：它是一个数字，指定调整大小的图像的高度。

以下示例说明了 p5.js 中的resize() 方法：

示例 1：

Javascript

function preload() {
    img_orig = loadImage("sample-image.png");
}
  
function setup() {
    createCanvas(500, 400);
    textSize(20);
  
    heightSlider =
      createSlider(0, 500, 200);
    heightSlider.position(30, 300);
  
    widthSlider =
      createSlider(0, 500, 400);
    widthSlider.position(30, 340);
}
  
function draw() {
    clear();
  
    text("Move the sliders to resize the image",
      20, 20);
    image(img_orig, 20, 40);
  
    new_height = heightSlider.value();
    new_width = widthSlider.value();
      
    img_orig.resize(new_width, new_height);
}

输出：

示例 2：

Javascript

function preload() {
    img_orig = loadImage("sample-image.png");
}
  
function setup() {
    createCanvas(500, 400);
    textSize(20);
  
    sizeSlider =
      createSlider(0, 500, 250);
    sizeSlider.position(30, 240);
}
  
function draw() {
    clear();
  
    text("Move the slider to resize " +
      "the image proportionally", 20, 20);
    image(img_orig, 20, 40);
  
    new_size = sizeSlider.value();
      
    // Setting one of the values as 0,
    // for proportional resizing
    img_orig.resize(new_size, 0);
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考： https://p5js.org/reference/#/p5.Image/resize