Working with multiple images on a canvas.

[aogriffiths]

Hi

I'm loving CamanJS and got a nice demo working with a single image on a html5 canvas. But I need some advice on the best way to work with multiple images on a canvas.

In my prototype a user can upload an image to the browser using the FileAPI and then manipulate it with Caman. (Similar technique to this http://tutorialzine.com/2013/02/instagram-filter-app/)

What would be the best way to allow a user to upload a second or third image and position them on the canvas too?

I've tried working natively with the canvas API:

var ctx = document.getElementById(canvasid).getContext('2d');
var img = new Image;
img.src = URL.createObjectURL(file); //from FileAPI
ctx.drawImage(img, 20,20,100,100); 

But this seems to be working outside the Caman framework (and I've needed to el.removeAttr('data-caman-id') on the canvas to make it work). I've also tried working with overlays:

Caman("#canvas", function () {
  this.newLayer(function () {
    this.overlayImage(imageobject);
  });
  this.render();
});

But these seem to stretch the image to fit the entire canvas and I can't find a way to control aspects like the scaling and positioning of the overlay with Caman.

Would anyone recommend one of these approaches over another, or is there a better way?

Thanks Adam

[meltingice]

The best way right now to handle this would be to work directly with the canvas API until you are ready to apply filters and/or photo adjustments to the canvas. At that point you should initialize CamanJS on the canvas element.

If you still want to be able to add/remove images after initialization: continue working directly with the canvas, and call finishInit on the Caman instance. It's a bit of a hack, but it works.

I'll mark this as a todo item so I remember to clean that up a bit.

[JimGeek]

@meltingice is this feature integrate into current release of caman js ?