How extract an save subimages from a given image

p5.js Coding Questions
1

Hello everyone,

I have an image of 100x100 pixels.
I’m looking for a simple code example that allows me to extract the 100 sub-images (for example 10x10 pixels) from the starting image.
And for each of these sub-images I would like to save them on the disk.

I’ve searched everywhere but I can’t find a similar example based on the p5.js Image object and "pixels[ ] " array.

Could someone help me?

Thanks a lot

1 Like
2

You can use a nested for loop and then use

PImage newImg = img.get(x*10,y*10);

And then just say newImg.save() for example with an int variable numSave which you increase every time using ++

3 Likes
3

Hi Chrisir,

Thanks for your response. I just tried to write this piece of code from your advice:

let img;

let newImg ;

function preload() {
  img = loadImage('my100x100picture.jpg');
}

function setup() {
  createCanvas(100,100);
  image(img, 0, 0);  //just to display the source img
  img.loadPixels();
  
  newImg = createImage(10, 10);
  newImg.loadPixels();
  
  for (var y = 0; y < 10; y++) {
    for (var x = 0; x < 10; x++) {
      newImg = img.get(x * 10, y * 10);
    }
  }
  
  newImg.save('mythumb', 'png');
}

But the compiler throws a “TypeError: newImg.save is not a function at /sketch.js: line 23”

Where is the error? (the p5.Image object “newImg” is, I think, correctly instantiated on line 14 and the documentation shows the existence of a “save()” method)

4

(post deleted by author)

1 Like
5

For those interested, from the suggestion of Chrisir, it seems to be quite easier to do it in Processing…

Here’s the code in Processing that i wanted in p5js

(I just add a variable for the thumbnail size).

PImage img;

PImage newImg;

int squareThumbSize = 50;


void setup() {
  size(100, 100);
  img = loadImage("https://i.imgur.com/dPpLXNK.png"); // the 100x100 source image
  image(img, 0, 0);
   
  int a = 1;
  
  for (int y=0; y<100; y = y + squareThumbSize ){
      for (int x=0; x<100; x = x + squareThumbSize){
        PImage newImg = createImage(squareThumbSize, squareThumbSize, RGB);
        newImg = img.get(x,y,squareThumbSize,squareThumbSize);
        newImg.save("mythumb" + a + ".png");
        a++;        
      }
  }
}

And finally, from the code in Processing, I eventually managed to write the same code in p5.js:

let img;
let newImg;
let a = 1;
let squareThumbSize = 50

function preload() {
  img = loadImage("https://i.imgur.com/dPpLXNK.png");  // a 100 x 100 pixels image from the web
}

function setup() {
  createCanvas(100, 100);
  image(img, 0, 0);  // just to display the source image
  
 // this code will slice the 100x100 px image in the 4 25x25 px subimages 
  for (var y = 0; y < height; y = y + squareThumbSize) {
    for (var x = 0; x < width ; x = x + squareThumbSize) {
      newImg = createImage(squareThumbSize, squareThumbSize);
      newImg = img.get(x,y,squareThumbSize,squareThumbSize);
      newImg.save("mythumb" + a + ".png");
      a++;        
    }
  }
}

function draw() {
  //
}
3 Likes
6

Congratulations! You achieved your goal! Well done!

3 Likes
7

Thanks a lot for your help,
your suggestions and questions led me to the solution.
:wink:

2 Likes