無需點擊即可更新圖像 JavaScript

Question

這是代碼，它只能通過單擊 canvas/img 來工作。 如何僅在不單擊或使用 onblur 的情況下使其更新？ 也許像 xmlhttprequest 這樣的東西，但我試過了，但它不起作用。 它給出了錯誤，我也是一個菜鳥，不知道如何修復不斷出現的錯誤

 window.onload = function () { var context = document.getElementById('img').getContext('2d'); var base_image = document.querySelector('.fj'); var canvas = document.querySelector('.canvas'); var h2 = document.getElementById('demo'); var brightVal = document.getElementById('b'); context.drawImage(base_image, 0, 0, base_image.width, base_image.height, 0, 0, canvas.width, canvas.height); document.getElementById('bri').onblur = function () { var amount = this.value + '%'; brightVal.innerHTML = amount; var img = document.getElementById('img'); img.setAttribute('style', 'filter:brightness(' + amount + ');'); } }

 <canvas id="img" class="canvas"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Cheadle_Hulme_Arches.jpg/324px-Cheadle_Hulme_Arches.jpg" class="fj"> </canvas> <input type="range" min="-300" max="500" value="100" class="slider" id="bri"> <h2 id="demo">Value: <span id="b">0</span></h2>

Answer 1

而不是使用

document.getElementById('bri').onblur = function ()

利用

document.getElementById('bri').onchange = function () 

它會起作用的

 window.onload = function () { var context = document.getElementById('img').getContext('2d'); var base_image = document.querySelector('.fj'); var canvas = document.querySelector('.canvas'); var h2 = document.getElementById('demo'); var brightVal = document.getElementById('b'); context.drawImage(base_image, 0, 0, base_image.width, base_image.height, 0, 0, canvas.width, canvas.height); document.getElementById('bri').onchange = function () { var amount = this.value + '%'; brightVal.innerHTML = amount; var img = document.getElementById('img'); img.setAttribute('style', 'filter:brightness(' + amount + ');'); } }

 <canvas id="img" class="canvas"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Cheadle_Hulme_Arches.jpg/324px-Cheadle_Hulme_Arches.jpg" class="fj"> </canvas> <input type="range" min="-300" max="500" value="100" class="slider" id="bri"> <h2 id="demo">Value: <span id="b">0</span></h2>

Answer 2

您也可以使用oninput ，因此它會動態更新

 window.onload = function () { var context = document.getElementById('img').getContext('2d'); var base_image = document.querySelector('.fj'); var canvas = document.querySelector('.canvas'); var h2 = document.getElementById('demo'); var brightVal = document.getElementById('b'); context.drawImage(base_image, 0, 0, base_image.width, base_image.height, 0, 0, canvas.width, canvas.height); document.getElementById('bri').oninput = function () { var amount = this.value + '%'; brightVal.innerHTML = amount; var img = document.getElementById('img'); img.setAttribute('style', 'filter:brightness(' + amount + ');'); } }

 <canvas id="img" class="canvas"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Cheadle_Hulme_Arches.jpg/324px-Cheadle_Hulme_Arches.jpg" class="fj"> </canvas> <input type="range" min="-300" max="500" value="100" class="slider" id="bri"> <h2 id="demo">Value: <span id="b">0</span></h2>

Answer 3

好吧，如果我理解你想要什么，你可以使用“onchange”而不是使用“onblur”。

document.getElementById('bri').onchange = function () { //... }