如何使用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更改圖像？

回答

相關問題