Run Camanjs on a new Image() or image data

[michaud]

I'm working on an app where i capture the image from my webcam with WebRTC. But it looks like, just from code analysis, that it doesn't support working on a new Image() or image data, is that correct? If so it would be nice to have that, if not how would that work?

[meltingice]

It should definitely be possible, although I'm not sure if there are any same-origin policies that apply to webcam images since it's such a new spec.

You could either put the webcam image data into a img element on the page and initialize Caman on that img element, or do something like:

var image = document.createElement('img');
image.src = webcamImageData;

Caman(image, function () {
  // modify image
});

[michaud]

Ok, but I keep the images in memory and not in the dom because the images will be used as textures in a threejs 3D application. Caman is based on Images in the dom. I wonder why that is. It would probably be a lot of work to make the option of using none dom images.

[meltingice]

Thanks for pointing this out. Caman no longer requires the image to be injected into the DOM. You can now pass the Caman function your image object directly.

[michaud]

wow, ninja coding, I am not worthy master ;)

[hellifiknow]

I have a very similar situation. Working on an app where the user can pick an image and edit it and pick another and edit it and so on. The result of these edits are written back to a KineticJS canvas.

Can you give me a code example of how to use Caman on an Image object that would not be loaded into the DOM?

I have tried this:

var imageObj = new Image(); imageObj.onload = function() {

                Caman(this, function() {
                    //modify image

                    });

            };
            imageObj.src = "images/theimage.jpg";

But, I get "TypeError: 'null' is not an object (evaluating 'this.image.parentNode.replaceChild')"

[jonnysamps]

Ya, I'm getting the same thing as @hellifiknow when trying to use a freshly constructed Image

[avandecreme]

Here is the workaround I found:

var image = new Image();
image.onload = function () {
    var div = document.createElement("div");
    div.appendChild(image);
    Caman(image, function () {
        this.sepia(50); // Whatever modification you need to do.
        this.render(function () {
            image = div.childNodes[0];
        });
    });
};
image.src = "image.jpeg";

[RomainMazB]

@avandecreme > Thanks a lot for this simple tick.

It's working perfectly. For those who need it, see my fiddle which:

• Create a simple canvas with green dummy text.
• Rotate this canvas to set it feet in the air and head on the ground 🎸🤘🎵 Pixies🎵🤘🎸
• Download final reversed file All of this without ever render the canvas in the DOM.