कैमरजेएस का उपयोग करके मैं एक छवि कैसे बदल सकता हूं?

Question

मुझे कई छवियां मिली हैं, और मैं उन्हें प्रत्येक समय <canvas> तत्व में अलग-अलग बिंदुओं पर लोड करना चाहता हूं और फिर CamanJS का उपयोग करके उन्हें कुशल बनाना चाहता हूं। मैं इस तरह प्रकट करने के लिए पहली छवि प्राप्त कर सकते हैं:

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

लेकिन तब जब मैं बाद में निम्नलिखित कोड का उपयोग कर कि एक ही तत्व अद्यतन करने के लिए प्रयास करते हैं, यह काम नहीं करता।

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

वहाँ किसी तरह स्पष्ट रीसेट करने के लिए/है/कैनवास फ्लश और इसे में नई छवि डेटा लोड, या मैं वास्तव में प्रत्येक छवि मैं लोड करना चाहते हैं के लिए अलग <canvas> तत्वों को बनाने की जरूरत है? मैं एक तत्व पसंद करूंगा क्योंकि मैं सभी मेमोरी नहीं खाऊंगा।

Answer 1

बस इसे एक बहुत परीक्षण और त्रुटि और फिर एक दोपहर के साथ समझ लिया!

इसके बजाय मेरी html में प्रत्यक्ष रूप से अपना कैनवास बनाने के बजाय, मैं एक कंटेनर बनाया और फिर बस निम्नलिखित किया:

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

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

आप कैनवास आईडी हर बार जब आप एक नया साथ Caman समारोह का उपयोग अद्वितीय होना चाहता हूँ छवि।

Answer 2

आईएमजी या कैनवास तत्व से कैमन विशेषता (डेटा-कैमान-आईडी) निकालें, छवि बदलें, और उसके बाद कैमन को फिर से प्रस्तुत करें।

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

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

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

Answer 3

आशा है कि कोड अन्य लोगों की सहायता करने में मदद कर सकता है।

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