Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    I will just post all of my code:

    Code:
    function CreateCanvasPreview() {
    	var originalImageHeight = parseInt(document.getElementById('UserImage').offsetHeight);
    	var originalImageWidth = parseInt(document.getElementById('UserImage').offsetWidth);
    	var cropHeight = parseInt(document.getElementById('CropAreaHeight').value);
    	var cropWidth = parseInt(document.getElementById('CropAreaWidth').value);
    	var cropX1 = parseInt(document.getElementById('x1').value);
    	var cropY1 = parseInt(document.getElementById('y1').value);
    	var cropX2 = parseInt(document.getElementById('x2').value);
    	var cropY2 = parseInt(document.getElementById('y2').value);
    
    hiddenCrop.innerHTML = '<div id="hiddenCropWrap"><canvas id="CanvasPreview" width="'+cropWidth+'px" height="'+cropHeight+'px">Your browser does not support the HTML5 canvas tag.</canvas></div>';
    
    <!--- The reason I am specifying the width and height of the canvas area, above, is that I want to be able to vertically and horizontally center the resulting canvas within another container div --->
    
    	document.getElementById('hiddenResultReveall').style.display = "block";
    	document.getElementById('UserImage').style.display = "none";
    
    var c=document.getElementById("CanvasPreview");
    var ctx=c.getContext("2d");
    var img = document.getElementById("UserImage");
    ctx.drawImage(img,cropX1,cropY1,cropWidth,cropHeight);
    }
    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:

    Code:
    ctx.drawImage(img,cropX1,cropY1,cropWidth,cropHeight,0,0,originalImageWidth,originalImageHeight);
    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!

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,178
    Thanks
    15
    Thanked 253 Times in 253 Posts
    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.

    I tried cropping an image, it did save the cropped image.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New to the CF scene
    Join Date
    May 2014
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for responding but your site does not seem to work very well for me at all, on either Chrome or Firefox.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •