重新加载 canvas 更改 Vue.Js + HTML 范围

Question

我正在尝试在更改值时重新加载图像，但我的 vue.js 只执行一次我的函数。基本上我会使用 Caman.js 来应用 'threshold' 和 'sharpen' 用户更改范围并显示示例。

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

Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.

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

重新加载 canvas 更改 Vue.Js + HTML 范围

Reload canvas on change Vue.Js + HTML Range

javascript

camanjs

vue.js