HTML 5를 사용하여 스케치 할 이미지

HTML 5 또는 jquery 또는 asp.net을 사용하여 이미지를 스케치로 변환하고 싶습니다. 또한 나는 그것에 이미지 저장 기능을 추가하고 싶다. 몇 가지 코드를 공유하십시오. 미리 감사드립니다.HTML 5를 사용하여 스케치 할 이미지

출처

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

HTML 5를 사용하여 스케치 할 이미지

답변

관련 문제