Range Slider не работает для увеличения яркости в холсте?

**Range Slider не работает для увеличения яркости в холсте?

изображение оригинальная

** 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>

источник

2015-06-28 Shivam Sharma

Я добавил 'ctx.fillText (опция, 10,10);' в конце вашей 'bright()' -функции и, похоже, работает очень хорошо (так как я не мог загрузить ваше изображение). Проблема в том, что он становится слишком ярким? – Niddro

спасибо за ответ niddro. –

спасибо за ответ niddro. , но josh marinacci прав, его просто parseInt и теперь отлично работает. –

Я думаю, что слайдер дает вам строку. Вы должны преобразовать его в число с parseInt() или parseFloat().

источник

2015-06-29 06:03:59

Range Slider не работает для увеличения яркости в холсте?

ответ

Смежные вопросы