Geek asks and answers

How to change image using CamanJS?

I have several images, and I would like to load them each into one element <canvas>at different points in time, and then manipulate them using CamanJS . I can get the first image so that it looks like this:

Caman('#canvas-element', '/images/one.jpg');

But then, when I try to update the same element using the following code, it does not work.

Caman('#canvas-element', '/images/two.jpg');

Is there a way to reset / clean / flush the canvas and load new image data into it, or do I really need to create separate elements <canvas>for each image that I want to upload? I would prefer one element because I do not want to eat all the memory.

+5
source share
3

Caman (data-caman-id) IMG CANVAS, , Caman.

document
  .querySelector('#view_image')
  .removeAttribute('data-camen-id');

const switch_img = '/to/dir/img.png';

Caman("#view_image", switch_img, function() {
  this.render();
});
+10

, .

function loadImage(source) {
    var canvas = document.getElementById('image_id');
    var context = canvas.getContext('2d');
    var image = new Image();
    image.onload = function() {
        context.drawImage(image, 0, 0, 960, 600);
    };
    image.src = source;
}

function change_image(source) {
    loadImage(source);
    Caman('#image_id', source, function () {
        this.reloadCanvasData();
         this.exposure(-10);
         this.brightness(5);
        this.render();
    });
}
+3

Just figured it out with a lot of trial and error, and then in one moment!

Instead of creating my canvas directly in my html, I created a container and then just did the following:

var retStr = "<canvas id=\"" + myName + "Canvas\"></canvas>";
document.getElementById('photoFilterCanvasContainer').innerHTML = retStr;

Caman("#" + myName + "Canvas", myUrl, function() {
    this.render();
});

You want the canvas identifier to be unique every time you call the Caman function with a new image.

+1
source

More articles:


All Articles