CROPPIE

In this 3 minute tutorial we’ll write a tiny JavaScript function that helps us crop images to lớn various aspect ratgame ios. Super useful for cropping photos before posting khổng lồ social truyền thông timelines or uploading protệp tin pictures as these are often required lớn be of a certain aspect ratio.

Bạn đang xem: Croppie

In this tutorial we’ll by modifying image data. For example, when a user is about to upload a an image we crop it to a certain aspect ratio. If we just want khổng lồ present images in a certain aspect ratio we can use a CSS only solution.

*

Loading the Image Data

To get started we’ll need a source image. Let’s use a generic image URL as our source.

const imageURL = "path/to/our/image.jpeg";To crop an image we need lớn access the actual image data. We can get khổng lồ this data by loading the URL to an element.

const inputImage = new Image();inputImage.src = imageURL;Our next step is drawing the image to a , the canvas will allow us to modify the image data. We’ll add the onload callbaông xã right before setting the src so we can capture the moment the image has loaded.

// this image will hold our source image dataconst inputImage = new Image();// we want to lớn wait for our image to loadinputImage.onload = () => // create a canvas that will present the output image const outputImage = document.createElement("canvas"); // mix it to the same size as the image outputImage.width = inputImage.naturalWidth; outputImage.height = inputImage.naturalHeight; // draw our image at position 0, 0 on the canvas const ctx = outputImage.getContext("2d"); ctx.drawImage(inputImage, 0, 0); // show both the image và the canvas document.toàn thân.appendChild(inputImage); document.toàn thân.appendChild(outputImage);;// start loading our imageinputImage.src = imageURL;Running this code results in a that is presenting the same image as the image located at our imageURL.

Cropping The Image to lớn a Square Aspect Ratio

Now that we have sầu gained access to the image data we can start manipulating it.

Let’s start with a square crop. A square crop has an aspect ratio of 1:1. This means each side of the output image has the same length. We can represent this numerically as an aspect ratio of 1. The aspect ratio of a 200x200 image is 1, the aspect ratio of a 400x300 image can be calculated by dividing the width and height, which equals 1.333 (400/300).

Xem thêm: Xét Nghiệm Rbc Là Gì ? Chỉ Số Rbc Tăng Hay Giảm Có Ảnh Hưởng

Let’s edit our code & view the results.

// the desired aspect ratio of our output image (width / height)const outputImageAspectRatio = 1;// this image will hold our source image dataconst inputImage = new Image();// we want khổng lồ wait for our image lớn loadinputImage.onload = () => // let"s store the width & height of our image const inputWidth = inputImage.naturalWidth; const inputHeight = inputImage.naturalHeight; // get the aspect ratio of the input image const inputImageAspectRatio = inputWidth / inputHeight; // if it"s bigger than our target aspect ratio let outputWidth = inputWidth; let outputHeight = inputHeight; if (inputImageAspectRatio > outputImageAspectRatio) outputWidth = inputHeight * outputImageAspectRatio; else if (inputImageAspectRatio outputImageAspectRatio) outputHeight = inputWidth / outputImageAspectRatio; // create a canvas that will present the output image const outputImage = document.createElement("canvas"); // set it lớn the same kích thước as the image outputImage.width = outputWidth; outputImage.height = outputHeight; // draw our image at position 0, 0 on the canvas const ctx = outputImage.getContext("2d"); ctx.drawImage(inputImage, 0, 0); // show both the image & the canvas document.body.appendChild(inputImage); document.toàn thân.appendChild(outputImage);;// start loading our imageinputImage.src = imageURL;The result is a square image, great! But let’s take a closer look. It seems our crop is not positioned in the center of the input đầu vào image. This is because we have not update the drawImage gọi. The drawImage Gọi takes 3 (or more) arguments, the inputImage, & the x và y position to draw the image at.

Our input đầu vào image is still drawn at location 0, 0 we need to lớn adjust this so we get a center crop instead of a top left crop.

To do this we need khổng lồ move the image slightly khổng lồ the left. Suppose our input đầu vào image is 400 pixels wide và our output image is 300 pixels wide, to lớn center it we’d need to move the input image 50 pixels lớn the left (negative 50 pixels). -50 pixels is 300 minus 400 divided by 2. This results in the following code snippet.

const outputX = (outputWidth - inputWidth) * .5

Let’s update the code snippet, we can use the same code for both the x and the y offphối.

// the desired aspect ratio of our output image (width / height)const outputImageAspectRatio = 1;// this image will hold our source image dataconst inputImage = new Image();// we want to lớn wait for our image lớn loadinputImage.onload = () => // let"s store the width and height of our image const inputWidth = inputImage.naturalWidth; const inputHeight = inputImage.naturalHeight; // get the aspect ratio of the đầu vào image const inputImageAspectRatio = inputWidth / inputHeight; // if it"s bigger than our target aspect ratio let outputWidth = inputWidth; let outputHeight = inputHeight; if (inputImageAspectRatio > outputImageAspectRatio) outputWidth = inputHeight * outputImageAspectRatio; else if (inputImageAspectRatio outputImageAspectRatio) outputHeight = inputWidth / outputImageAspectRatio; // calculate the position to draw the image at const outputX = (outputWidth - inputWidth) * 0.5; const outputY = (outputHeight - inputHeight) * 0.5; // create a canvas that will present the output image const outputImage = document.createElement("canvas"); // phối it khổng lồ the same size as the image outputImage.width = outputWidth; outputImage.height = outputHeight; // draw our image at position 0, 0 on the canvas const ctx = outputImage.getContext("2d"); ctx.drawImage(inputImage, outputX, outputY); // show both the image & the canvas document.body.appendChild(inputImage); document.toàn thân.appendChild(outputImage);;// start loading our imageinputImage.src = imageURL;With this update our crop is now centered on the input image.

Want to be kept in the loop?

Subscribe below lớn stay updated on new articles và obatambeienwasirherbal.com sản phẩm releases like FilePond & Doka Image Editor

Thư điện tử Subscribe

Creating a Reusable JavaScript Crop Function

As a final step let’s turn our code into lớn a reusable function so we can quickly crop images with various crop aspect ratgame ios. Our JavaScript snippet is already suitable khổng lồ be used for any aspect ratio, not just squares.