[英]Reload canvas on change Vue.Js + HTML Range
我正在嘗試在更改值時重新加載圖像,但我的 vue.js 只執行一次我的函數。 基本上,我將使用 Caman.js 來應用用戶更改范圍並顯示示例的“閾值”和“銳化”。
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();
});
}
}
與 input 事件不同,change 事件不一定會在每次更改元素值時觸發。
隨着change
它是不一致的:
const logValue = e => { document.getElementById('display-value').innerHTML = e.target.value; }
<input type="range" onchange="logValue(event)" /> <div id="display-value" />
嘗試改用input
:
const logValue = e => { document.getElementById('display-value').innerHTML = e.target.value; }
<input type="range" oninput="logValue(event)" /> <div id="display-value" />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.