CODEWITHSUNDEEP
javascripthtmlimagecanvascrop
Michbeckable
Michbeckable

Reputation: 1891

Javascript image crop possible without canvas?

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.

Upvotes: 4

Views: 5998

Answers (4)

Ray Hulha
Ray Hulha

Reputation: 11221

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.org/en-US/docs/Web/API/createImageBitmap

Upvotes: 1

Blindman67
Blindman67

Reputation: 54109

Everything 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.

Upvotes: 3

krishnakumar sekar
krishnakumar sekar

Reputation: 663

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.com/fengyuanchen/cropper/

Upvotes: 0

micah
micah

Reputation: 8106

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 compressed 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.

Upvotes: 1

Related Questions