# How Can I crop an image in processing js with javascript?

**URL:** <https://discourse.processing.org/t/how-can-i-crop-an-image-in-processing-js-with-javascript/2048>\
**Category:** Coding Questions\
**Created:** [July 24, 2018, 2:21pm UTC](https://discourse.processing.org/t/how-can-i-crop-an-image-in-processing-js-with-javascript/2048 "2018-07-24T14:21:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![donammar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/donammar/32/876_2.png) [@donammar](https://discourse.processing.org/u/donammar)\
**Post date:** [July 24, 2018, 2:21pm UTC](https://discourse.processing.org/t/how-can-i-crop-an-image-in-processing-js-with-javascript/2048/1 "2018-07-24T14:21:10Z")

</div>

How Can I crop an image in processing js with javascript ?

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [July 24, 2018, 4:30pm UTC](https://discourse.processing.org/t/how-can-i-crop-an-image-in-processing-js-with-javascript/2048/2 "2018-07-24T16:30:14Z")

</div>

I would start by googling something like “javascript crop image” for a ton of results. Then I’d put together a [MCVE](https://stackoverflow.com/help/mcve) that tries it out in a simple example program.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 24, 2018, 5:41pm UTC](https://discourse.processing.org/t/how-can-i-crop-an-image-in-processing-js-with-javascript/2048/3 "2018-07-24T17:41:04Z")

</div>

Got this image round crop sketch in Java Mode. Should be easy to convert it to p5js or pjs: 😉

- [Forum.Processing.org/two/discussion/5618/crop-image#Item\_26](http://Forum.Processing.org/two/discussion/5618/crop-image#Item_26)

---

<div class="post-metadata">

**Author:** ![rupertrussell](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rupertrussell/32/10849_2.png) [@rupertrussell](https://discourse.processing.org/u/rupertrussell)\
**Post date:** [August 15, 2020, 10:16am UTC](https://discourse.processing.org/t/how-can-i-crop-an-image-in-processing-js-with-javascript/2048/4 "2020-08-15T10:16:49Z")

</div>

Take a look at a sample program on [github](https://github.com/rupertrussell/crop_image_003):

PImage originalImage;  
PImage croppedImage = createImage(200, 200, RGB);

void setup() {

size(800, 533);  
originalImage = loadImage(“church.jpg”);  
}

void draw() {  
image(originalImage, 0, 0); // display the church on the screen  
croppedImage = originalImage.get(mouseX, mouseY, 100, 100);  
image(croppedImage, width/2, height/2);

}

void mouseClicked(){  
croppedImage.save(“croppedImage.png”);  
}