El método resize() de p5.Image en p5.js se usa para cambiar el tamaño de la imagen al ancho y alto dados. La imagen se puede escalar proporcionalmente usando 0 como uno de los valores de ancho y alto.
Sintaxis:
resize( width, height )
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación.
- ancho: Es un número que especifica el ancho de la imagen redimensionada.
- altura: Es un número que especifica la altura de la imagen redimensionada.
Los siguientes ejemplos ilustran el método resize() en p5.js:
Ejemplo 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); }
Producción:
Ejemplo 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); }
Producción:
Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/ referencia/#/p5.Imagen/redimensionar
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA