Profile images are a popular thing on web sites. If you sign into a site, chances are you probably have a profile image for that site.
Sure, there are services like gravatar, but let's face it - not all of your users are going to have a gravatar account. That's why it's important to make profile images easy to configure for your users.
We rely heavily on images in Foliotek, not just for profile images, but also background images on Identity Pages. So a flexible solution was a must, as well.
The solution needed to be able to crop images into a square or a circle, needed to work on mobile devices, and needed to be simple to understand. We're not trying to provide the user with a photoshop equivalent of image manipulation. We just wanted to allow them to zoom in on a certain part of an image, and only return that cropped image.
...it's important to make profile images easy to configure...
Enter Croppie.js
That's why Foliotek built Croppie.js. In this post, I'm going to demonstrate how easy it is to set up croppie to allow users to crop images on your site.
How to use Croppie
First, you need to grab the croppie.js and croppie.css files from the Github Repository. Add them to your site like this:
<html>
<head>
<link href="path/to/croppie.css" rel="Stylesheet" />
</head>
<body>
<!-- Your Html Here -->
<script src="croppie.js"></script>
</body>
</html>
If you have them installed, you can also use bower install croppie or npm install croppie to grab those files.
Next, you'll need an element to house your croppie element and all the components that go along with it. A single div should suffice.
<div class="my-croppie-element"></div>
Now let's write some javascript to initialize our croppie instance. For simplicity purposes, I'll use jQuery, but Croppie isn't jQuery dependent. You can write anything you see below without jQuery.
var $element = $('.my-croppie-element');
$element.croppie({
viewport: {
width: 100,
height: 100,
type: 'circle'
},
boundary: {
width: 350,
height: 350
}
});
The simplest way to describe the difference beteween the boundary and the viewport is this: The boundary is the outer container of the croppie. The viewport is the portion of the image that will be cropped.
Now we have our croppie instantiated. If you load your page, you'll see an empty croppie. That's because we haven't told our croppie which image we're cropping. Let's do that now.
$element.croppie('bind', 'path/to/my/image.jpg');
Now we have an image bound to our croppie, and we can drag and zoom around on this image. You can zoom with the mouse wheel, or if you're on a mobile device you can pinch zoom. But this isn't useful yet unless we can get the resulting image that the user crops.
To do that we need to call the result method on our croppie instance. There are two different types of results that can be returned. One of which is an html result. This will return a div with our image inside of it. The div's overflow is hidden, and the image is positioned and scaled in such a way that the cropped result is the only thing visible.
The result type that we're going to use (and is probably going to be used most of the time), is canvas. This will draw the cropped image to a canvas, and using canvas.toDataURL(), will return a base64 image of the resulting image. Let's see how it's done by putting our result in a separate img tag.
<img id="result-image" />
$element.croppie('result', 'canvas').then(function (result) {
$('#result-image').attr('src', result);
});
That's it. That's really all you need to crop images with croppie.js. There are several different ways to customize croppie to fit your needs, check out the documentation to see all of them.
To be continued
Next time I'll show how to send the base64 image to your server, and save it for use at a later time.