在更改 Vue.Js + HTML Range 时重新加载画布答案

【问题标题】：Reload canvas on change Vue.Js + HTML Range在更改 Vue.Js + HTML Range 时重新加载画布
【发布时间】：2023-03-15 06:39:01
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js camanjs

【解决方案1】：

与输入事件不同，更改事件不一定会在每次更改元素值时触发。

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

【讨论】：