If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Cannot figure out how to get a clipped image out of HTML5 canvas...

Hello all,

Apologies in advance for my somewhat pathetic knowledge of javascript.

Anyway, I am having constant problems using HTML5 canvas to produce a clipepd image.

I will just summarise what exactly I am trying to do so that (hopefully) someone can perhaps offer me some good advice. I am setting up page where users can upload their own image, which is auto-resized to fit a specific region. They are then able to crop it, rotate it, and resize the resulting crop (ideally). I have got about as far as, somewhat, clumsily, allowing them to crop and rotate the result, but I don't know where to start really resizing the resulting crop. Given that this is a clipped image the original script that I wrote just screws everything up.

I am thinking that using canvas instead will work better, but I just cannot get the canvas to draw the image properly. I don't know what's happening but it just seems random, the image is contorted, stretched, the canvas isn't the right size... just a frustrating nightmare.

The above code is the only thing that SORT OF works. If I try to specify any more criteria within ctx.drawImage(), the whole thing stops working completely.

I have never used canvas before and I am doing my best to figure it out, I have tried to follow the instructions here - HTML canvas drawImage() Method, but I just can't seem to get it to work... What I would actually like to have (I thought) is this:

As in, I do not want the image to be scaled at all, just cropped (offsetWidth does get the computed width of the image right? The image itself is styled to a fixed height, but the originals will be a variety of dimensions as they are user uploads). Also I want the canvas to be filled with the image so I can conveniently manipulate it otherwise.

Am I going about this sensibly?

This project has caused me no end of frustration so any help at all, I would be forever grateful!

In the meantime you can go to my site, go down the Menu till you see the HTML Canvas page, You're welcome to use the code, just copy the page source into a blank web page, it will work on your machine or a server, you can link to pretty much any picture on the web. To right click and save the completed image open it with Firefox, right click and save image as.