Range Slider不能用于增加画布的亮度吗？

Question

**

原始图像

**

**

手动输入选项值时运行良好

**

**

当使用滑块的id引用获取值时不起作用

**

 var img = new Image(); img.src = 'ring.jpg'; var canvas,ctx,imageData,data; img.onload = function() { canvas = document.getElementById('canvas1'); canvas.width=img.width; canvas.height=img.height; ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); img.style.display = 'none'; imageData = ctx.getImageData(0,0,canvas.width, canvas.height); data = imageData.data; }; var brightness = function() { ////////////problem area///////////// var option= 50; //this works var option=document.getElementById("slider").value; // this does not work ////////////////////////////////////// for(var i=0;i<data.length;i+=4) { data[i]=data[i]+option; data[i+1]=data[i+1]+option; data[i+2]=data[i+2]+option; } for(var i=0;i<data.length;i+=4) { if(data[i]>255) data[i]=255; if(data[i]<0) data[i]=0; if(data[i+1]>255) data[i+1]=255; if(data[i+1]<0) data[i+1]=0; if(data[i+2]>255) data[i+2]=255; if(data[i+2]<0) data[i+2]=0; } ctx.putImageData(imageData, 0, 0); }; 

 <html> <body> <div id="canvasarea"> <canvas id="canvas1" width="300px", height="300px"> this is canvas </canvas> <input type="button" id="bnbtn1" value="bright" onclick="brightness()" /> <input type="range" id="slider" min="0" max="100" step="1" onchange="brightness()"/> </div> </body> </html> 

Answer 1

我认为滑块为您提供了一个字符串。 您必须使用parseInt（）或parseFloat（）将其转换为数字。