There are lots of scripts and plugins on the web for Javascript image crop/resize. Some using the HTML5 canvas to crop a certain area and storing the image back to the client via DataUrl. But without canvas I tested the jrac jquery plugin, but it only provides the cropping coordinates (x, y, width, height) in the end. There is never called an actual cropping function on the image.
How do I actually use these cropping coordinates on the Javascript image object? Can I only use CSS to show the image like being cropped or can I actually crop data out of that image into a new image in Javascript?
It seems to me that all Image crop plugins only provide a handy UI to get crop coordinates but the actual crop/resize must be done server-side with the image being sent to a php script, is that correct?
My question is the same as this one, that has not been answered yet.
There are lots of scripts and plugins on the web for Javascript image crop/resize. Some using the HTML5 canvas to crop a certain area and storing the image back to the client via DataUrl. But without canvas I tested the jrac jquery plugin, but it only provides the cropping coordinates (x, y, width, height) in the end. There is never called an actual cropping function on the image.
How do I actually use these cropping coordinates on the Javascript image object? Can I only use CSS to show the image like being cropped or can I actually crop data out of that image into a new image in Javascript?
It seems to me that all Image crop plugins only provide a handy UI to get crop coordinates but the actual crop/resize must be done server-side with the image being sent to a php script, is that correct?
My question is the same as this one, that has not been answered yet.
Share Improve this question edited May 23, 2017 at 11:51 CommunityBot 11 silver badge asked Jan 8, 2016 at 18:45 MichbeckableMichbeckable 1,8911 gold badge30 silver badges44 bronze badges4 Answers
Reset to default 3Everything is possible in javascript (well almost everything)
To crop an image you need to side step the DOM and built in image handling API's and decode the image yourself. A lot of extra work involved but there is some help out there. A quick search on github found decoders/encoders for both jpg and png formats Image decoders (I am sure there are plenty more about) so with a little work you should be able to modify them to do some cropping.
What you're asking for is a library to read image data to 2d array of pixels (or a 1d array of pixels in case of the canvas), crop the pixels, and write it back to pressed image data.
Sorry to say but that library is the canvas. You can, of course, use css to fake it but all the image data is still there, you're just choosing to only show part of it.
Yes this is possible with createImageBitmap
Syntax:
createImageBitmap(image)
createImageBitmap(image, options)
createImageBitmap(image, sx, sy, sw, sh)
createImageBitmap(image, sx, sy, sw, sh, options)
See: https://developer.mozilla/en-US/docs/Web/API/createImageBitmap
You can try the below one ,But its using Canvas for rendering,
As of now there is no good lib available without canvas becuase it is very difficult to capture the point you selected and to do processing the thousands and thousands of pixels without Graphics Card ,
Canvas only having the functionality to use Graphics Card
intel and firefox is doing some concepts regarding this to introduce parallel processing in javascript
https://github./fengyuanchen/cropper/