blob

gistfile1.txt

<input type="file" id="imgUpload"><canvas id="imgCanvas" style="display:none;"></canvas><input type="number" id="r" max="255" min="0" placeholder="R" value="255"><input type="number" id="g" max="255" min="0" placeholder="G" value="255"><input type="number" id="b" max="255" min="0" placeholder="B" value="255"><div id="colorPreview" style="width:50px;height:50px;background-color:rgb(255,255,255);"></div><a id="downloadLink" style="display:none;" download="processed_image.png">Download Image</a><script>document.getElementById('imgUpload').addEventListener('change',function(e){const t=document.getElementById('imgCanvas'),n=t.getContext('2d'),o=new FileReader;o.onload=function(e){const a=new Image;a.onload=function(){t.width=a.width,t.height=a.height,n.drawImage(a,0,0),updateImage()},a.src=e.target.result},o.readAsDataURL(e.target.files[0])});function updateImage(){const t=document.getElementById('imgCanvas'),n=t.getContext('2d'),r=parseInt(document.getElementById('r').value)||0,g=parseInt(document.getElementById('g').value)||0,b=parseInt(document.getElementById('b').value)||0,c=n.getImageData(0,0,t.width,t.height),d=c.data;for(let i=0;i<d.length;i+=4){const l=d[i],m=d[i+1],u=d[i+2],p=d[i+3];Math.abs(l-m)<=5&&Math.abs(l-u)<=5&&Math.abs(m-u)<=5&&l>200&&(d[i]=r,d[i+1]=g,d[i+2]=b)}n.putImageData(c,0,0),document.getElementById('downloadLink').href=t.toDataURL('image/png'),document.getElementById('downloadLink').style.display='block'}['r','g','b'].forEach(e=>{document.getElementById(e).addEventListener('input',function(){document.getElementById('colorPreview').style.backgroundColor='rgb('+document.getElementById('r').value+','+document.getElementById('g').value+','+document.getElementById('b').value+')',updateImage()})});</script>