advice on how to use crop plugin

turchinc commented 10 years ago

I stumbled onto caman last week and am trying to use it achieve client side cropping of images: I have a source image and a canvas for crop previews on a page. The source image is loaded from the server and the jcrop allows the user to draw a crop area on the source. When the crop is selected, I want to use caman to then render the crop onto a canvas on the page (leaving the source unaltered). If the user wants to keep it, okay, otherwise they can do a new crop from the source (it remains unchanged). Everything "seems" to work (I get no errors, the crop coordinates are correct and caman logs the following):

DOM initialized caman.full.js:1656
Image loaded. Width = 1280, Height = 800 caman.full.js:1656
30 32 86 56 index.html:31
Executing plugin crop caman.full.js:1656
Plugin crop finished!

but the crop canvas remains blank. The sample page, reduced to it's most basic elements looks like this:

<!DOCTYPE html> 
<html lang="en">
<head>
<title>Image Cropper</title>
<script type="text/javascript" src="caman.full.js"></script>
<script src="jcrop/js/jquery.min.js"></script>
<script src="jcrop/js/jquery.Jcrop.js"></script>
<script type="text/javascript">
var lastC;
var url = "test.jpg";
Caman.DEBUG = ('console' in window);
jQuery(function ($) {
    //load image for creating crop from
    //attach jcrop to draw clipping frame 
    //for crop. the coordinates are stored
    //using the saveCoords() function
    $("#crop-source").load(function () {
        $(this).Jcrop({
            onSelect : saveCoords
        })
    }).attr({
        src : url
    });
    //output crop to another canvas
    //the idea being, if I create a new 
    //crop from the above image, then the 
    //preview gets refreshed
    $("#submit").click( function () {
        Caman("#crop-source", "#preview-canvas", function () {
            this.revert();
            console.log(lastC.w, lastC.h, lastC.x, lastC.y);
            this.crop(lastC.w, lastC.h, lastC.x, lastC.y);
            this.render();
        });
    });
});
//save coordinates to use when 
//creating the crop preview
function saveCoords(c) {
    lastC = c;
}
</script> 
</head>
<body id="body">
<img id="crop-source"   /> 
<input type="button" id="submit" value="Crop"/> 
<canvas id="preview-canvas"/> 
</body>
</html>

Can you please advise as to what I am doing wrong? Thanks!

bebraw commented 10 years ago

Would it be possible for you to set up a jsfiddle or similar I can execute?

By the way, you can implement simple cropping like this without Caman unless you wish to store the results. You simply need to set up a container (overflow: hidden, fixed width, height according to your crop) and then make copy of the image its child. Then you need to offset the image within that cropping container.

You can see the technique in action at a related blog post of mine.

turchinc commented 10 years ago

This should work to illustrate the issue: http://jsfiddle.net/k6fjg/3/

bebraw commented 10 years ago

Hmm. Maybe your source and target are in the wrong order? In the documentation target comes first.

You could try to reduce the problem further and see if you can get that syntax to work in any case. Start with image and then replace that with a canvas.

meltingice / CamanJS

advice on how to use crop plugin #118