Trying to draw an image to canvas and then use Caman.js to manipulate this image

Question

So far I have this piece of code ;

    var imageLoader = document.getElementById('imageLoader');
        imageLoader.addEventListener('change', handleImage, false);
    var canvas = document.getElementById('imageCanvas');
    var ctx = canvas.getContext('2d');

    function handleImage(e){
        var reader = new FileReader();
        reader.onload = function(event){
            var img = new Image();
            img.onload = function(){
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img,0,0);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);     
    }

to draw an image to the canvas and then I have this code

            %img#example{"data-caman-hidpi" => "images/example1_1200.jpg", src: "images/example1_600.jpg"}/

which manipulates a image stored in images/ but being new to canvas and not having much javascript knowledge, I'm not sure how to go about amalgamating these two pieces of code so that they work together. I want to be able to choose an image from my computer and for this to be drawn onto the canvas and then for to be able to use Caman.js to manipulate this image. Any help would be much appreciated.

Answer 1

I have the same issue. The fix for me was to add this attribute to the canvas element 'data-caman-hidpi-disabled'.

The bug only effects retina screens. More information here: https://github.com/meltingice/CamanJS/issues/188

Answer 2

I think it would be easier to load the image to an <img> element then call CamanJS's constructor on it. This will replace the <img> element with a <canvas> element

HTML

<img src="something" id="imagesrc">

Javascript

Caman('#imagesrc', function(){
   //manipulate image
});

If you'd like to use a Canvas object directly like what you did, you use the same Javascript code but using your canvas object. Caman will manipulate the same canvas object.

Caman('#imageCanvas',function(){
  //manipulate image
});

More info here: http://camanjs.com/guides/#BasicUsage