HTML5を使用してスケッチする画像

画像をHtml 5またはjqueryまたはasp.netを使用してスケッチに変換したいと思います。また、私はそれに画像保存機能を追加したい。いくつかのコードを教えてください。ありがとうございます。HTML5を使用してスケッチする画像

2012-01-04 Asim Javed

「スケッチに」とはどういう意味ですか？これまでにどのようなコードを試しましたか？ – fcalderan

スケッチからグレースケールを意味するのですか？ – Talha

2dキャンバスapi oh html5を使用してイメージをグレースケールに変換する完全なソースコードです。しかし、html5キャンバスをサポートしているブラウザを使用してください。

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript"> 
     //Global variables 
     var picWidth = 400; // width of the canvas 
     var picHeight = 400; // height of the canvas 
     var picLength = picWidth * picHeight; // number of chunks 
     var myImage = new Image(); // Create a new blank image. 

     // Load the image and display it. 
     function displayImage() { 

      // Get the canvas element. 
      canvas = document.getElementById("myCanvas"); 

      // Make sure you got it. 
      if (canvas.getContext) { 

       // Specify 2d canvas type. 
       ctx = canvas.getContext("2d"); 

       // When the image is loaded, draw it. 
       myImage.onload = function() { 
        // Load the image into the context. 
        ctx.drawImage(myImage, 0, 0); 

        // Get and modify the image data. 
        getColorData(); 

        // Put the modified image back on the canvas. 
        putColorData(); 
       } 

       // Define the source of the image. 
       // This file must be on your machine in the same folder as this web page. 
       myImage.src = "kestral.png"; 
      } 
     } 

     function getColorData() { 
      myImage = ctx.getImageData(0, 0, 400, 400); 
      // Loop through data. 
      for (var i = 0; i < picLength * 4; i += 4) { 

       // First bytes are red bytes.   
       // Get red value. 
       var myRed = myImage.data[i]; 

       // Second bytes are green bytes. 
       // Get green value. 
       var myGreen = myImage.data[i + 1]; 

       // Third bytes are blue bytes. 
       // Get blue value. 
       var myBlue = myImage.data[i + 2]; 

       // Fourth bytes are alpha bytes 
       // We don't care about alpha here. 
       // Add the three values and divide by three. 
       // Make it an integer. 
       myGray = parseInt((myRed + myGreen + myBlue)/3); 

       // Assign average to red, green, and blue. 
       myImage.data[i] = myGray; 
       myImage.data[i + 1] = myGray; 
       myImage.data[i + 2] = myGray; 
      } 
     } 
     function putColorData() { 

      ctx.putImageData(myImage, 0, 0); 
     } 
     function noPhoto() { 
      alert("Please put a .png file in this folder."); 
     } 
    </script> 
    </head> 
    <body onload="displayImage()"> 
    <h1> 
    Codeheaven.org Example (Image to Grayscale uisng html5 canvas) 
    </h1> 
    <p> 
     The original image is on the left and the modified image is on the right. 
    </p> 
    <img id="myPhoto" src="kestral.PNG" onerror="noPhoto()"> 
    <canvas id="myCanvas" width="400" height="400"> 
    </canvas> 
    </body> 
</html>

img srcプロパティでイメージのパスを指定します。画像のサイズに合わせて適切な幅と高さを設定します。

出典

2012-01-04 12:30:22 Talha

HTML5を使用してスケッチする画像

答えて

関連する問題