Crop a Canvas Background Image to Square

INTRO

In previous howtos: here and here, we have learned how we can set the dimensions of a canvas to the image being loaded as a background, and then how we can set the background image to pixels in the foreground to make it editable. Now we can apply both of these methods and start doing something with the output! As a start we will look at how we can now crop a background image on a canvas to a square image. This method also shows how to save some time by only fetching the pixels that are needed for the cropped image. With a bit more hard work on the blocks code, it is possible to crop any part of the image to any dimensions.

SETUP

  1. Apply the blocks, components and html code required to set the image dimensions, as per the previous howtos

  2. Apply the blocks and components required to capture the pixels required, and to then set the canvas to square.

    1. All we are doing here is manipulating the x,y values to be captured by working out where the centre square will be for the image, then only getting the pixel colour values for that area. This saves some processing time, because we do not need to capture the whole image.

    2. Separate procedures is required for landscape and portrait because they are "opposites", but we can use the same procedure to draw out the pixels

    3. Clock1 is used to ensure that the new canvas dimensions are captured

    4. Clock2 is used to show the progress dialog from the start of the crop process

    5. In my example the Select Image button will switch between a landscape and portrait image

    6. The user can only crop when a full image is displayed

    7. I have not included blocks to save out the new square image to file (Canvas1.saveAs)

BLOCKS

VIDEO

cropToSquare.webm