# How extract an save subimages from a given image

**URL:** <https://discourse.processing.org/t/how-extract-an-save-subimages-from-a-given-image/39380>\
**Category:** Coding Questions\
**Created:** [October 22, 2022, 8:37am UTC](https://discourse.processing.org/t/how-extract-an-save-subimages-from-a-given-image/39380 "2022-10-22T08:37:20Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Coyote35](https://avatars.discourse-cdn.com/v4/letter/c/7993a0/32.png) [@Coyote35](https://discourse.processing.org/u/Coyote35)\
**Post date:** [October 22, 2022, 8:37am UTC](https://discourse.processing.org/t/how-extract-an-save-subimages-from-a-given-image/39380/1 "2022-10-22T08:37:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 22, 2022, 9:39am UTC](https://discourse.processing.org/t/how-extract-an-save-subimages-from-a-given-image/39380/2 "2022-10-22T09:39:18Z")

</div>

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 ++

---

<div class="post-metadata">

**Author:** ![Coyote35](https://avatars.discourse-cdn.com/v4/letter/c/7993a0/32.png) [@Coyote35](https://discourse.processing.org/u/Coyote35)\
**Post date:** [October 22, 2022, 4:45pm UTC](https://discourse.processing.org/t/how-extract-an-save-subimages-from-a-given-image/39380/3 "2022-10-22T16:45:36Z")

</div>

Hi Chrisir,

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

```auto
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)

---

<div class="post-metadata">

**Author:** ![Coyote35](https://avatars.discourse-cdn.com/v4/letter/c/7993a0/32.png) [@Coyote35](https://discourse.processing.org/u/Coyote35)\
**Post date:** [October 22, 2022, 5:00pm UTC](https://discourse.processing.org/t/how-extract-an-save-subimages-from-a-given-image/39380/4 "2022-10-22T17:00:48Z")

</div>

(post deleted by author)

---

<div class="post-metadata">

**Author:** ![Coyote35](https://avatars.discourse-cdn.com/v4/letter/c/7993a0/32.png) [@Coyote35](https://discourse.processing.org/u/Coyote35)\
**Post date:** [October 22, 2022, 8:53pm UTC](https://discourse.processing.org/t/how-extract-an-save-subimages-from-a-given-image/39380/5 "2022-10-22T20:53:23Z")

</div>

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).

```auto
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:

```auto
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() {
  //
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 22, 2022, 9:34pm UTC](https://discourse.processing.org/t/how-extract-an-save-subimages-from-a-given-image/39380/6 "2022-10-22T21:34:12Z")

</div>

Congratulations! You achieved your goal! Well done!

---

<div class="post-metadata">

**Author:** ![Coyote35](https://avatars.discourse-cdn.com/v4/letter/c/7993a0/32.png) [@Coyote35](https://discourse.processing.org/u/Coyote35)\
**Post date:** [October 22, 2022, 9:43pm UTC](https://discourse.processing.org/t/how-extract-an-save-subimages-from-a-given-image/39380/7 "2022-10-22T21:43:19Z")

</div>

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