操作像素B

灰度化

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
    <title></title>
    <style type="text/css">
        canvas {
        border:1px solid #ececf1;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var imageObj = new Image();
            imageObj.onload = function () {
                DrawImage(this);
            };
            imageObj.src = "../Images/2.jpg";
        }
        function DrawImage(imageObj) {
            var canvas = document.getElementById("canvas1");
            var context = canvas.getContext("2d");
            var desX = 100;
            var desY = 100;
            var sourceWidth = imageObj.width;
            var sourceHeight = imageObj.height;
            context.drawImage(imageObj, desX, desY);
            var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            var data = imageData.data;
            // 遍历像素
            for (var i = 0; i < data.length; i += 4) {
                //   var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
                var brightness = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
                data[i] = brightness;
                data[i + 1] = brightness;
                data[i + 2] = brightness;            
            }
     
            context.putImageData(imageData,0,0);

        }

    </script>
</head>
<body>
    <canvas id="canvas1" width="580" height="500" />
</body>
</html>

toDataURL

<html>
<head>
    <title>toDataURL example</title>
  <script type="text/javascript">
      function draw() {
          // Create some graphics.    
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.fillStyle = "white";
              ctx.beginPath();
              ctx.rect(5, 5, 300, 250);
              ctx.fill();
              ctx.stroke();
              ctx.arc(150, 150, 100, 0, Math.PI, false);
              ctx.stroke();
          }
      }
      function putImage() {
          var canvas1 = document.getElementById("MyCanvas");
          if (canvas1.getContext) {
              var ctx = canvas1.getContext("2d");                // Get the context for the canvas.
              var myImage = canvas1.toDataURL("image/png");      // Get the data as an image.
          }
          var imageElement = document.getElementById("MyPix");  // Get the img object.
          imageElement.src = myImage;                           // Set the src to data from the canvas.

      }
  </script>
</head>
<body onload="draw()" >
      <div>
        <button onclick="putImage()">Copy graphic using toDataURL</button>        
      </div>
      <div>
        <canvas id="MyCanvas" width="400" height="400" >This browser or document mode doesn't support canvas</canvas>
        <img id="MyPix" />
      </div>
  </body>
</html>

　　

<html>
<head>
    <script>
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            // 画云
            context.beginPath(); // 开始用户定义图形
            context.moveTo(170, 80);
            context.bezierCurveTo(130, 100, 130, 150, 230, 150);
            context.bezierCurveTo(250, 180, 320, 180, 340, 150);
            context.bezierCurveTo(420, 150, 420, 120, 390, 100);
            context.bezierCurveTo(430, 40, 370, 30, 340, 50);
            context.bezierCurveTo(320, 5, 250, 20, 250, 50);
            context.bezierCurveTo(200, 5, 150, 20, 170, 80);
            context.closePath(); // 完成用户定义图形
            context.lineWidth = 5;
            context.fillStyle = "#8ED6FF";
            context.fill();
            context.strokeStyle = "#0000ff";
            context.stroke();
            // 将canvas图像保存为数据url
            var dataURL = canvas.toDataURL();
            // 将数据 url 作为 canvasImg 的图像源
            // 这样就可以保存到客户机器上了
            document.getElementById("canvasImg").src = dataURL;
        };
    </script>
    </head>
    <body onmousedown="return false;">
        <canvas id="myCanvas" width="578" height="200" style="display: none;"></canvas>
        <img id="canvasImg" alt="Right click to save me!">
    </body>
</html>

　　

 

 

posted @ 2012-11-20 14:35  bradleydan  阅读(123)  评论(0)    收藏  举报