如何使用CamanJS更改图像？

我有多个图像，我想在不同的时间点将它们分别加载到一个单独的<canvas>元素中，然后使用CamanJS对它们进行操作。我能拿到第一形象出现这样的：如何使用CamanJS更改图像？

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

但是当我尝试随后使用下面的代码来更新相同的元素，这是行不通的。

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

是否有某种方式来重置/清除/刷新画布和新的图像数据加载到它，还是我真的需要创造我想要加载每个图像单独<canvas>元素？我更喜欢单一元素，因为我不想吃掉所有的记忆。

来源

2013-02-22 SoaperGEM

这真的只是一个疯狂的猜测！ Caman有一个“replaceCanvas”方法（在源代码中）。所以，（1）保留对Caman对象的引用[var theCaman = Caman（'＃canvas-element'，'/images/one.jpg'）; ]（2）手动在画布上绘制新图像。（3）傻瓜卡曼通过要求它用相同的画布替换画布[theCaman.replaceCanvas（document.getElementById（“canvas-element”））; ] – markE 2013-02-23 20:11:58

刚刚通过大量的试验和错误发现了这一点，然后是一个时刻！

，而不是直接在我的html创建我的画布，我创建了一个容器，然后就做了以下内容：

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

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

你想在画布上的ID是唯一的每次与新访问的Caman功能时图片。

来源

2013-04-06 23:09:07 user2253389

从IMG或CANVAS元素中删除Caman属性（data-caman-id），更改图像，然后重新渲染Caman。

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

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

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

来源

2013-08-25 17:27:06 neurosnap

非常感谢，'$（“＃view_image”）。removeAttr（“data-caman-id”）;'是这里真正的金块。 – GONeale 2016-01-18 06:29:45

花了几个小时尝试不同的方式，只有这个工作！ – 2017-12-05 07:29:03

希望遵循的代码可以帮助其他人有相同的要求。

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(); 
    }); 
}

来源

2014-09-05 08:10:31 Arthur

如何使用CamanJS更改图像？

回答

相关问题