If you ever get stuck in a situation where you have to crop an area of an\u00a0image\u00a0like a circle or like a square or\u00a0maybe\u00a0a rectangle area in a\u00a0web\u00a0application then\u00a0there\u2019s a\u00a0way of achieving that by using a\u00a0Javascript\u00a0library\u00a0or plugin\u00a0called\u00a0<\/b>Croppie<\/b>. It is fast,\u00a0and you will get a lot of configuration options to customize it as\u00a0you\u00a0need. If I can quote from the\u00a0website\u00a0then it is \u201cCroppie\u00a0is fast, easy to use image cropping plugin with tons of configurations options\u201d.<\/p>\n
So if you want to use it in your project\u00a0first\u00a0you have to install it in\u00a0your\u00a0project, and you can do that with\u00a0NPM<\/b>\u00a0or\u00a0BOWER<\/b>.\u00a0<\/b>Just run this following command as you see fit.<\/p>\n
NPM:\u00a0\u00a0npm\u00a0install\u00a0croppie<\/p>\n
Bower: bower install\u00a0croppie<\/p>\n
After\u00a0that,\u00a0you can require it or import it in your project.<\/b>\u00a0Now to use this\u00a0Croppie\u00a0first you have to create a div tag in your\u00a0HTML\u00a0file and give\u00a0an id\u00a0to the div tag, now this div tag will be responsible for showing the image.\u00a0<\/b>Like this one.<\/p>\n
<\/p>\n
<div\u00a0class=”demo”><\/div><\/p>\n
<script><\/p>\n
$(‘.demo’).croppie({<\/p>\n
url:\u00a0‘demo\/demo-1.jpg’,\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/ although you can use the base64 format of an\u00a0image in the place of the\u00a0URL<\/p>\n
});<\/p>\n
<\/<\/b>script<\/b>><\/b><\/p>\n
Now this will produce something like this. You can grab and select a<\/p>\n
![\"\"](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2019\/03\/cropp1-275x300.jpg\")
portion of the selected image to crop. Then you can zoom in or out using the bar under. By\u00a0default,\u00a0it is enabled and you can also disable it, we will discuss that later.\u00a0Now,\u00a0remember the output of the image will always be the area that you have selected and\u00a0it will be encoded in base64.<\/p>\n
Now here\u2019s an example with some more functionality.<\/p>\n
<\/p>\n
<script><\/p>\n
$uploadCrop\u00a0=\u00a0$(‘#upload-demo’).croppie({<\/p>\n
enableExif:\u00a0true,<\/p>\n
viewport:\u00a0{<\/p>\n
width:\u00a0200,<\/p>\n
height:\u00a0200,<\/p>\n
type:\u00a0‘circle’<\/p>\n
},<\/p>\n
boundary:\u00a0{<\/p>\n
width:\u00a0300,<\/p>\n
height:\u00a0300<\/p>\n
}<\/p>\n
});<\/p>\n
<\/<\/b>script<\/b>><\/b><\/p>\n
<\/p>\n
Here we can see some options like\u00a0enableExif\u00a0or viewport, they are used to customize the visual. Here\u00a0enableExif<\/b>\u00a0<\/b>tells\u00a0Croppie\u00a0to read\u00a0Exif\u00a0orientation from the image data and fixes the image before rendering it to the page.<\/p>\n
Viewport<\/b>\u00a0<\/b>is an object, it is responsible for the inner part of the image which is visible to the user. You can set height, width, and\u00a0type of the viewport, which is circle by default, but it can be changed into square or rectangle.<\/p>\n
Boundary<\/b>\u00a0is also an object which is the outer container of the cropped image.<\/p>\n
Now to get the cropped area of the image as a result you have to use\u00a0the\u00a0result<\/b>\u00a0<\/b>method.<\/p>\n
<\/p>\n
<script><\/p>\n
$uploadCrop.croppie(‘result’, {<\/p>\n
type:\u00a0‘canvas’,<\/p>\n
size:\u00a0‘original’,<\/p>\n
}).then(response\u00a0=>{<\/p>\n
});<\/p>\n
<\/<\/b>script<\/b>><\/b><\/p>\n
<\/p>\n
![\"\"](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2019\/03\/cropp2.jpg\")
<\/p>\n
Here\u00a0response\u00a0<\/b>is the image what you\u2019d desired. You\u2019ll get something like this.<\/p>\n
Although this\u00a0response\u00a0<\/b>will be in base64 encoded, so you have to convert it into the<\/p>\n
file\u00a0format, how\u00a0are you going to do\u00a0that?\u00a0That I\u2019m not going to tell.\u00a0 \ud83d\ude42<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
If you ever get stuck in a situation where you have to crop an area of an\u00a0image\u00a0like a circle or like a square or\u00a0maybe\u00a0a rectangle area in a\u00a0web\u00a0application then\u00a0there\u2019s a\u00a0way of achieving that by using a\u00a0Javascript\u00a0library\u00a0or plugin\u00a0called\u00a0Croppie. It is fast,\u00a0and you will get a lot of configuration options to customize it as\u00a0you\u00a0need. If I can […]<\/p>\n","protected":false},"author":24,"featured_media":1456,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[72,5],"tags":[73,107],"yoast_head":"\n