在更改 Vue.Js + HTML 范围时重新加载画布

Question

我正在尝试在更改值时重新加载图像，但我的 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();
            });
        }
    }

Answer 1

与 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" />