Javascript 将图像更改为灰度的If语句_Javascript

Javascript 将图像更改为灰度的If语句

javascript

Javascript 将图像更改为灰度的If语句,javascript,Javascript,目前，我有一个图像转换为灰度，它是这样做的点击一个按钮。我需要能够删除此功能，要么使用相同的按钮或另一个按钮。我认为这将是可能的，通过使用一个if语句，虽然我不知道如何做到这一点 <html> <body> <script> function greyscale(){ //get canvas var canvas = document.getElementById("canvas"); //get the conte

目前，我有一个图像转换为灰度，它是这样做的点击一个按钮。我需要能够删除此功能，要么使用相同的按钮或另一个按钮。我认为这将是可能的，通过使用一个if语句，虽然我不知道如何做到这一点

<html>
<body>
<script>

    function greyscale(){
    //get canvas    
    var canvas = document.getElementById("canvas");
    //get the context property
    var ctx = canvas.getContext('2d');
    //get image
    var image = document.getElementById("imgSrc");
    //draw image to canvas
    ctx.drawImage(image,0,0);
    //get the image data
    var imageData = ctx.getImageData(0,0,130,130);
    //get the pixel data
    var px = imageData.data;
    //get entire length of pixel data
    var length = px.length;

    //loop and manipulate the pixels
    for(var i=0;i<length;i+=4){
        var redPx = px[i];
        var greenPx = px[i+1];
        var bluePx = px[i+2];
        var alphaPx = px[i+3];    

        //create greyscale sub pixel
        var greyscale = redPx*.3 + greenPx * .59 + bluePx * .11;

        //store each subpixel as that greyscale subpixel
        px[i] = greyscale;
        px[i+1] = greyscale;
        px[i+2] = greyscale;

        }

    //put the manipulated image data back into the canvas
    ctx.putImageData(imageData,0,0);

    }
</script><img src="flower.jpg" id="imgSrc"/>
<canvas id="canvas" width="130" height="130"></canvas>

<br>

</script>

<input id="btngreyscale" type="button" value="Greyscale" onclick="greyscale();" />
<input id="btngreyscaleoff" type="button" value="Greyscale Off" onclick="loadImage();" />

<br>
<input type="radio" name="zing" id="on" checked/>on
<input type="radio" name="zing" id="off"/>off

<script type="text/javascript">
if (document.getElementById('btngreyscale').checked) {
alert('on');
} else {
(document.getElementById('btngreyscaleoff').checked) 
alert('off');
}
</script>

</body>
</html>


函数灰度（）{
//获取画布
var canvas=document.getElementById（“canvas”）；
//获取上下文属性
var ctx=canvas.getContext（'2d'）；
//获取图像
var image=document.getElementById（“imgSrc”）；
//在画布上绘制图像
ctx.drawImage（图像，0,0）；
//获取图像数据
var-imageData=ctx.getImageData（0,0130）；
//获取像素数据
var px=imageData.data；
//获取像素数据的整个长度
变量长度=px.length；
//循环并操纵像素
对于（var i=0；i，正如Roman hocke已经说过的，您无法使用灰度将其转换回彩色图像，因为您丢弃了一些信息。要返回彩色图像，您只需重新绘制第一幅图像
因此，在您的代码中，这将是：
(document.getElementById('btngreyscaleoff').checked) 
   alert('off');
   ctx.drawImage(image,0,0); 
}

这很容易做到，因为您已经在DOM中保存了图像对象。
您最好保留两个图像，一个是彩色的，另一个是灰度的。一旦您将图像从彩色转换为灰度，您就无法再次重建颜色！您自愿丢弃了颜色信息！因此您必须保留原始图像所以我该怎么做呢？我不知道，对JavaScript来说非常陌生