范围滑块无法提高 canvas 中的亮度？

Question

**

orignal image

**

run fine when option value entered manually

**

does not work when id reference of slider is used for geting value

**

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() 将其转换为数字。

范围滑块无法提高 canvas 中的亮度？

Range Slider not working for increasng the brightness in canvas?

html

javascript

css

canvas

image-processing