不单击图像更新JavaScript

这是代码，它只能通过单击canvas/img来工作。如何仅使其更新而不单击或使用onblur？ 可能是类似xmlhttprequest的东西，但我试过了，它不起作用。它给出了错误，我也是一个傻瓜，不知道如何修复不断出现的错误

window.onload=函数（）{
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金额=此值+'%'；
brightVal.innerHTML=金额；
var img=document.getElementById（'img'）；
setAttribute（'style'，'filter:brightness（'+amount+'）；'）；
}
}

值：0

而不是使用

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

使用

它会起作用的

window.onload=函数（）{
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金额=此值+'%'；
brightVal.innerHTML=金额；
var img=document.getElementById（'img'）；
setAttribute（'style'，'filter:brightness（'+amount+'）；'）；
}
}

值：0

您还可以使用

oninput

，因此它会动态更新

window.onload=函数（）{
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金额=此值+'%'；
brightVal.innerHTML=金额；
var img=document.getElementById（'img'）；
setAttribute（'style'，'filter:brightness（'+amount+'）；'）；
}
}

值：0

如果我理解您的要求，您可以使用“onchange”，而不是使用“onblur”

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

---

“如何在不单击或使用onblur的情况下仅使其更新？”您所说的“更新”是什么意思？您是要将更改后的图像保存到服务器，还是要更改画布元素本身的属性？它应该在何时更新？当滑块被更改时？它应该在使用滑块时更新是的。我欣赏这种热情，但我认为用户不需要知道如何单击图像。看看他们的代码示例，我修改了另一个方法的答案，该方法现在可以工作了，而不是使用可以由javascript而不是用户调用的click函数@拖延饥饿

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