My attempt to reload an image when I change a value is facing some challenges. It seems that my vue.js function is only executing once. The goal is to use Caman.js to apply a 'threshold' and 'sharpen' effect based on user input through a range slider, and display a preview of the changes.
HTML
<div id="app">
...
<canvas id="canvas" style="width: 1024px; border:2px solid #333;"></canvas>
...
<input id="sharpen_control" v-model="sharpen_mod" @change="reloadCanvas()" type="range" min="1" max="200">
<input id="threshold_control" v-model="threshold_mod" @change="reloadCanvas()" type="range" min="1" max="200">
...
</div>
Vue.js
el: '#app',
data: {
sharpen_mod: '50',
threshold_mod: '50'
},
mounted() {
this.loadCanvas()
},
methods: {
loadCanvas(){
const self = this
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = function() {
canvas.width = img.naturalWidth
canvas.height = img.naturalHeight
ctx.drawImage(img, 0, 0);
}
img.src = 'https://i.ibb.co/SNYCXcf/img.jpg';
},
reloadCanvas() {
this.loadCanvas()
this.drawCanvas()
},
drawCanvas(){
const self = this
Caman('#canvas', function() {
this.sharpen(self.sharpen_mod).contrast(5).clip(30).threshold(self.threshold_mod).render();
});
}
}