정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

Canvas를 사용하여 이미지 색 샘플링

HTML5 Canvas 메서드를 사용하여 그림 또는 사진에서 색을 추출하는 스포이드 효과를 만듭니다.

소개

이미지에서 색을 샘플링하면 패션 사이트 또는 홈 데코레이션 사이트 같은 웹 사이트에 재미와 유연성을 줄 수 있습니다. 사용자는 샘플 이미지에서 색을 선택하여 청바지, 자동차 또는 주택의 외양을 변경할 수 있습니다. Canvas API의 getImageDataputImageData 메서드는 상대적으로 쉽게 픽셀 또는 전체 사진을 샘플링할 수 있도록 합니다. 그 외 사진을 Canvas에 넣기 위한 drawImage, CanvasImageData 개체 및 data 속성 등 다른 Canvas API가 사용됩니다.

여기서는 getImageData로 사진의 색을 샘플링하여 배색된 그림 프레임을 만드는 방법에 대해 설명합니다. 프레임은 CSS 스타일 시트와 함께 border 속성을 사용하여 만들어지므로 Canvas 또는 이미지의 필수 요소는 아닙니다. 그러나 구문이 표시되므로 자신의 웹 페이지 코드에 복사할 수 있습니다. 추가 참조의 경우 색 샘플은 개별 빨강, 녹색, 파랑 및 알파(투명도) 값, CSS 색 값, 색조, 채도 및 HSV 값으로도 표시됩니다.

getImageData를 사용하여 얻은 이미지 데이터 또한 컬러 사진을 흑백 이미지로 변환하기 위해 조작됩니다. putImageData 메서드는 조작된 데이터를 Canvas로 다시 가져다 놓는 데 사용됩니다.

예제의 HTML 코드는 Canvas를 설정하고 요소를 입력하여 사진의 URL을 가져오고 선택합니다. 4개의 이미지가 웹 페이지에 하드 코딩되지만 입력 필드에 다른 이미지를 붙여 넣을 수 있습니다. 앱은 사용할 이미지가 필요한 경우 드롭다운 상자(select 요소)가 변경될 때 또는 Load 단추가 클릭될 때 입력 필드에서 URL을 가져옵니다. 전체 샘플은 MSDN 샘플 사이트에 있습니다.

프레이밍 도구 UI 이미지

Canvas로 사진 가져오기

색 샘플링의 첫 번째 단계는 Canvas 요소로 사진을 가져오는 것입니다. Canvas 요소 자체는 페이지에서 시각적으로 표시되는 기능이 없습니다. Canvas 요소를 유용하게 사용하기 위해서는 콘텐츠, 즉 이 경우에는 이미지를 추가해야 합니다.

Canvas 개체에는 몇 가지 메서드와 속성만 있습니다. Canvas에서 이미지를 그리거나 조작하는 작업의 대부분은 CanvasRenderingContext2D 개체를 사용하여 수행됩니다. 컨텍스트 개체는 Canvas 개체의 getContext 메서드와 var ctx = canvas.getContext("2d"); 문에 의해 반환됩니다. 현재 Windows Internet Explorer 9 및 Internet Explorer 10에서는 2D 컨텍스트만 지원되지만 일부 다른 브라우저에서는 WebGL 같은 3D 컨텍스트도 지원됩니다.

img 태그와는 달리 Canvas 요소에는 URL을 할당하는 src 속성이 없습니다. 이 예제에서 img 요소가 만들어지고 여기에 이미지가 할당됩니다. 이미지는 나중에 해당 컨텍스트 개체의 drawImage 속성을 사용하여 Canvas로 전송됩니다.

다음 예제에서는 Canvas 요소("canvas") 및 Context 개체("ctx")에 대한 전역 변수를 만듭니다. 사진이 로드될 때 사진을 저장하는 이미지 개체("image")가 만들어집니다.


var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var image = document.createElement("img");


샘플에서 getImage() 함수는 이미지 개체의 src를 입력 필드의 값으로 설정합니다. 파일의 크기가 크면 이미지를 로드하는 데 어느 정도 시간이 걸리므로 웹 페이지는 로드를 마칠 때까지 기다려야 합니다. 이를 위해, 이미지를 모니터링하는 onreadystatechange 이벤트 처리기가 사용됩니다. 처리기 내에서 complete 상태 값을 관찰하는 데 readyState 속성이 사용됩니다.


function getImage() {
    var imgSrc = document.getElementById("fileField").value;

    if (imgSrc == "") {
        imgSrc = rootPath + samplefiles[0];     // Get first example
        document.getElementById("fileField").value = imgSrc;
    }

    image.src = imgSrc;

  //image.complete
    image.addEventListener("load", function () {
        var dimension = 380; // Deep dimensions reasonable.
        var dw;
        var dh;

        // set max dimension
        if ((image.width > dimension) || (image.height > dimension)) {
          if (image.width > image.height) {
            // scale width to fit, adjust height
            dw = parseInt(image.width * (dimension / image.width));
            dh = parseInt(image.height * (dimension / image.width));
          } else {
            // scale height to fit, adjust width
            dh = parseInt(image.height * (dimension / image.height))
            dw = parseInt(image.width * (dimension / image.height));
          }
          canvas.width = dw;
          canvas.height = dh;
        }
        else {

          canvas.width = image.width;
          canvas.height = image.height;
        }

        ctx.drawImage(image, 0, 0, dw, dh);  // Put the photo on the canvas
        setBorder();  // Update color border          
    }, false);
}


사진을 화면에 맞추기 위해, 사진이 너무 크면 그 크기가 조정됩니다. 지정된 Canvas의 크기(여기서는 380 x 380픽셀)보다 너비나 높이가 클 경우 크기 조정 값이 계산됩니다. 사진이 반드시 사각형인 것은 아니기 때문에 크기 조정 비율로는 최대 크기(너비 또는 높이)가 사용됩니다. 이 값이 나머지 크기를 조정하는 데 사용되므로 Canvas에 표시될 때 가로 세로 비율이 유지됩니다.

그런 다음 drawImage 메서드를 사용하여 사진이 Canvas로 복사됩니다. drawImage 메서드는 이미지 개체와 이미지의 왼쪽 위 모서리를 정의하는 X 및 Y 픽셀 좌표를 가져옵니다. 이러한 값을 사용하여 이미지 표시를 시작할 위치를 지정할 수 있습니다. 이 위치는 애니메이션 효과를 위한 타일 이미지 부분을 표시하는 데 사용될 수 있습니다. 또한 이미지를 만들 크기를 지정하는 너비 및 높이 매개 변수도 사용됩니다. 이 예제에서 이미지의 너비와 높이는 380픽셀 이하로 조정되며, 따라서 이미지의 크기가 Canvas 크기에 맞춰 축소됩니다. drawImage 메서드 역시 Canvas에 이미지를 배치하는 데 사용할 수 있는 4가지 추가 매개 변수를 지원합니다. 자세한 내용은 drawImage 참조 페이지를 참조하세요.

픽셀 값 가져오기

픽셀 값을 가져오기 위해서는 imageData 개체를 가져오는 getImageData 메서드가 사용됩니다. imageData 개체에는 Canvas 이미지의 실제 픽셀을 포함하는 pixelArray가 있습니다. pixelArray는 RGBA(빨강, 녹색, 파랑, 알파) 형식으로 정렬됩니다. 마우스 클릭의 대상인 단일 픽셀의 값을 찾으려면 X 및 Y 좌표, Canvas의 너비를 기반으로 인덱스를 pixelArray로 계산해야 합니다. ((y * canvas.width) + x) * 4 수식은 오프셋을 배열로 가져옵니다. 각 색을 가져오려면 pixelArray에 대한 오프셋에서 첫 번째 값으로 시작한 후 그 다음 값 3개를 가져옵니다. 이렇게 하면 다음과 같이 픽셀에 대한 RGBA 값을 얻을 수 있습니다.


 canvas.onclick = function (evt) {
        //  get mouse coordinates from event parameter
        var mouseX = parseInt(evt.offsetX);
        var mouseY = parseInt(evt.offsetY);

        //  get imageData object from canvas
        var imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);

        //  get pixelArray from imagedata object
        var data = imagedata.data;  

        //  calculate offset into array for pixel at mouseX/mouseY
        var i = ((mouseY * canvas.width) + mouseX) * 4;

        //  get RGBA values
        var r = data[i];        
        var g = data[i+1];
        var b = data[i+2];
        var a = data[i+3];
   

여기서 수행한 작업에서는 getImageData 메서드를 사용하여 Canvas 이미지에서 직접 픽셀을 읽습니다. getImageData 메서드는 Canvas 웹 페이지가 한 컴퓨터 도메인에서 다른 도메인으로(도메인 간에) 픽셀을 복사하지 못하도록 하는 보안 요구 사항을 포함합니다. 도메인 간 이미지는 drawImage를 사용하여 Canvas로 전송될 수 있지만 픽셀을 pixelArray로 복사하는 데 getImageData 메서드가 사용되면 DOM exception 보안 오류(18)를 발생시킵니다.

예제에는 전체 페이지를 손상하지 않고 도메인 간 오류를 catch하기 위해 getSafeImageData()라는 함수가 포함되어 있습니다. getSafeImageData() 함수에는 예외를 catch하기 위해 try 및 catch 문이 포함되어 있습니다. 예외가 발생하지 않으면 함수는 pixelArray 개체를 반환합니다.

Canvas 요소에서 보안 오류가 발생할 경우 origin-clean 플래그(내부 플래그)를 false로 설정합니다. 페이지를 새로 고치거나, Canvas를 삭제하고 새 Canvas를 만들면 플래그가 지워지며, 플래그가 지워지기 전에는 다른 이미지를 로드할 수 없습니다. getSafeImageData() 함수는 예외를 catch할 때 페이지에서 Canvas 요소를 제거하고 새 Canvas를 만들고 동일한 특성과 이벤트를 새 Canvas에 할당합니다. (clean-origin 플래그를 true로 설정하여) 새 Canvas가 만들어지면 오류 메시지가 새 Canvas로 인쇄됩니다. getSafeImageData() 함수는 getImageData 메서드가 실패했음을 알리는 데 사용되는 빈 문자열을 반환합니다. 여기서부터는 샘플에서 다른 이미지를 로드하거나 동일한 도메인에 있는 자신이 가진 이미지를 로드해야 합니다.

Windows 7과 Windows 8 간의 코드 호환성을 유지하기 위해, JavaScript parseInt() 메서드를 사용하여 마우스 좌표를 정수로 표준화합니다. Windows 8에서 마우스 좌표는 CSS 및 다른 UI 기능에 대한 부동 소수점 값으로 반환됩니다. 이 예제에서 parseInt()pixelArray에서 잘못된 값이 반환되도록 하는 반올림 오류를 방지하기 위해 계산 전에 적용됩니다. 이때 pixelArray에 대한 인덱스로 부동 소수점을 사용하면 배열 인덱스가 정수 값으로만 이루어지므로 아무 것도 반환되지 않습니다.

pixelArray에서 반환되는 픽셀의 RGBA 값은 16진수 값으로 변환되고 CSS 테두리의 배경색으로 사용됩니다. RGB 값만 사용되며, 다음 예제에서는 3개의 값을 단일 CSS 호환 색으로 변환하는 방법을 보여 줍니다.


function getHex(data, i) {
    //  Builds a CSS color string from the RGB value (ignore alpha)
    return ("#" + d2Hex(data[i]) + d2Hex(data[i + 1]) + d2Hex(data[i + 2]));
}

function d2Hex(d) {
    // Converts a decimal number to a two digit Hex value
    var hex = Number(d).toString(16);
    while (hex.length < 2) {
        hex = "0" + hex;
    }
    return hex.toUpperCase();
}


이 예제에서 X/Y 마우스 좌표를 기반으로 계산된 pixelArray 값은 getHex 함수에 전달됩니다. getHex 함수는 10진 RGB 값을 두 자리 16진수 값으로 변환하는 d2Hex() 함수를 호출합니다. 변환된 각 RGB 값은 하나의 문자열로 연결되며, CSS 색 값 형식을 만들기 위해 시작 부분에 "#" 기호가 추가됩니다. 그런 다음 이 값은 몇 가지 다른 속성과 함께 테두리 스타일의 색을 설정하는 데 사용됩니다. 예를 들어, 모서리가 둥근 청록색 테두리 및 3D 모양은 style= 'border-color:#4E8087; border-width:30px; border-style:groove; border-radius:20px' 입니다.

CSS 요소

Canvas 주위의 프레임은 테두리 속성을 사용하여 만들어집니다. 기본값은 폭이 30px이고 border-radius가 없는 단색 스타일입니다. 값이 변경되면 이미지 아래에 구문이 표시됩니다. 테두리 색은 이미지를 클릭하면 설정됩니다. 스타일 및 반경(둥근 모서리) 값은 드롭다운 메뉴에서 선택됩니다.

예제에서는 5가지 테두리 스타일을 제공합니다. 단색 외에도 3D 테두리 스타일 속성인 양각, 음각 스타일, 홈 양각 및 홈 음각을 선택할 수 있습니다. 양각 및 음각 스타일은 조명 효과가 있는 평면 프레임 스타일입니다. 홈 양각 및 홈 음각 스타일은 조명 효과가 있는 보다 3D적인 프레임입니다. 조명 효과는 왼쪽 위 또는 오른쪽 아래 모서리에서 오는 주 광선의 모양을 제공합니다.


function setDispColors(bColor, fColor) {
    //  Set the color of anything with the class colorDisp. 
    var oDisplay = document.getElementsByClassName("colorDisp");
    //  Set the colors for each element
    for (i = 0; i < oDisplay.length; i++) {
        oDisplay[i].style.backgroundColor = bColor;
        oDisplay[i].style.color = fColor;
    }
}


border-radius 스타일 드롭다운 메뉴는 5, 10, 20 및 30의 4가지 값을 제공합니다. 이러한 숫자는 임의적이며 자신이 적절하다고 생각하는 값으로 설정할 수 있습니다. CSS 스타일 값이 업데이트되면 이미지 아래에 표시되는 구문 줄이 업데이트됩니다.

데이터 표시를 읽을 수 있는 상태로 유지

예제에서는 색 값(RGB, CSS 및 HSV) 표시 필드에 대한 배경색으로 샘플링한 색 값을 사용합니다. 모든 표시 필드와 이미지의 테두리 속성에 class="colorDisp가 할당됩니다. 이를 통해 예제에서는 한 번에 빠르게 모든 요소에 배경색을 설정할 수 있습니다. 표시는 배경색 및 글꼴 색을 전달하는 setDispColors() 함수를 사용하여 채색됩니다.


function setDispColors(bColor, fColor) {
    //  Set the color of anything with the class colorDisp. 
    var oDisplay = document.getElementsByClassName("colorDisp");
    //  Set the colors for each element
    for (i = 0; i < oDisplay.length; i++) {
        oDisplay[i].style.backgroundColor = bColor;
        oDisplay[i].style.color = fColor;
    }
}


배경색은 밝은 베이지에서 진한 검정까지 다양하므로 배경 위에 인쇄되는 글꼴 색이 문제가 될 수 있습니다. 값을 읽을 수 있도록, 글꼴 색은 색의 밝기 또는 어둡기에 따라 흰색 또는 검정으로 설정됩니다. 흰색 또는 검정이 언제 표시되는지 알아내기 위해 샘플 색이 회색조로 변환되고, 값이 설정 지점보다 크면(밝으면) 텍스트는 검정으로 인쇄됩니다. 그렇지 않으면 텍스트가 흰색으로 인쇄됩니다. 샘플은 RGB 색의 범위인 0에서 255 사이의 값 또는 임계값 128로 설정됩니다. 다음 예제에서는 글꼴 색을 결정하는 calcGray() 함수를 보여 줍니다.


function calcGray(data, i) {
    // Calculates the gray scale value of the chosen color and 
    // assigns a contrasting text color.
    var gray = ((data[i] + data[i + 1] + data[i + 2]) / 3); // Average RGB values       
    return ((gray > 128) ? "black" : "white");    // Assign black or white to return           
}


이 기술은 대부분의 색에 잘 맞지만, 페이지에 맞게 임계값을 조정해 볼 수 있습니다.

컬러 사진을 흑백으로 변환

단일 픽셀에서 색을 가져오는 데 사용했던 것과 동일한 기술을 사용하여 모든 픽셀을 조작할 수 있습니다. 다음 예제에서는 컬러 사진을 흑백으로 변환하기 위해 pixelArray의 모든 픽셀이 샘플링 및 수정됩니다. 각 픽셀의 빨강, 녹색 및 파랑 값의 평균을 내어 단일 값이 구해지면 각 픽셀 색 채널의 원래 값이 평균 값으로 바뀝니다. 각 채널은 동일한 값을 가지므로 그 결과는 검정에서 흰색까지의 값으로 구성된 회색조 이미지가 됩니다.

이 예제에 나오는 "makeBW()" 함수는 Canvas에서 pixelArray를 가져와서 시작됩니다. for 루프의 쌍은 pixelArray를 작동시켜 각 픽셀 값을 가져옵니다. RGB 값이 함께 추가되고 그 합계를 3으로 나누어 평균이 구해집니다. 알파(또는 투명도) 값은 무시됩니다. 그런 다음 결과 값이 배열에 있는 픽셀의 각 색 값(RGB)으로 다시 복사됩니다. 모든 픽셀이 변환되면 pixelArray를 Canvas에 다시 넣기 위해 putImageData 메서드가 사용됩니다.


function makeBW() {
    //  Converts image to B&W by averaging the RGB channels, and setting each to that value
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height); // refresh canvas
    imgData = getSafeImageData(0, 0, canvas.width, canvas.height);
    if (imgData != "") {
        for (y = 0; y < imgData.height; y++) {
            for (x = 0; x < imgData.width; x++) {
                var i = ((y * 4) * imgData.width) + (x * 4);
                var aveColor = parseInt((imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3)
                imgData.data[i] = aveColor;
                imgData.data[i + 1] = aveColor;
                imgData.data[i + 2] = aveColor;
            }
        }
        ctx.putImageData(imgData, 0, 0);
    }
}


예제에 나온 코드는 회색조 단추를 클릭하면 실행됩니다. 컬러 이미지를 다시 로드하려면 로드를 클릭합니다.

세피아 또는 청사진 색조 추가

컬러 사진을 흑백으로 변환하는 것은 향수를 불러 일으키는 추억의 이미지로 만들 수 있는 좋은 방법입니다. 보다 더 오래된 사진 느낌을 내려면 세피아 또는 청사진 톤을 사용할 수 있습니다. 이러한 프로세스는 고문서 같은 효과와 느낌을 주기 위해 백 년 이상 사용되어 왔습니다. 원래는 강한 화학 물질을 사용하여 인화지의 은색을 배색 효과를 내는 다른 요소로 바꿨었는데, 디지털 이미지의 경우 프로세스는 유사하지만 과정이 훨씬 단순해졌습니다.

사진을 세피아 또는 청사진 톤으로 변환하려면 필수적인 몇 가지 단계를 거쳐야 합니다. 각 픽셀에서 다음 단계가 수행됩니다.

  1. pixelArray에서 픽셀 하나를 가져옵니다.
  2. 픽셀을 흑백으로 변환합니다.
  3. 회색조 픽셀(RGB)을 HSV 컬러 모델로 변환합니다.
  4. 픽셀의 HSV 값에 색상, 채도 및 값을 추가하거나 빼서 색조를 만듭니다.
  5. 색을 띈 픽셀(RGB)을 RGB 컬러 모델로 다시 변환합니다.
  6. 픽셀을 pixelArray에 다시 넣습니다.

다음 예제에서는 "rgb2hsv()" 및 "hsv2rgb()" 함수, HSV 값을 픽셀에 추가하는 "makeTint()" 함수를 보여 줍니다. 색조는 단일 값을 사용하여 변환하는 것이 더 쉬우므로 HSV 값으로 추가됩니다. 색상은 360도 범위를 기반으로 하는 색이며, 소프트웨어에서 종종 색상표로 표시됩니다. 채도 및 값(경우에 따라 명도, 광도 또는 밝기라고도 함)은 백분율(0-100%)로 나타냅니다. 이미지에 세피아 톤으로 색을 입히는 작업은 "Hue = 30", "Sat = 30"을 회색조 값에 추가하여 수행됩니다. 세피아 톤의 경우 Val 매개 변수에 아무 것도 추가되지 않습니다. 청사진 이미지를 만들기 위한 수식은 "Hue = 220", "Sat = 40"을 더하는 것입니다. 푸른빛 색조는 원하는 것보다 어둡게 표시될 수 있으므로 Val은 이미지를 약간 연하게 하기 위해 10%를 추가하도록 설정됩니다. 이 값은 임의적이며, 사진에 따라 다를 수 있습니다. 이러한 모델에 대한 자세한 내용은 Wikipedia에서 HSL 및 HSV를 참조하세요.


function rgb2hsv(r, g, b) {
    //  Converts RGB value to HSV value
    var Hue = 0;
    var Sat = 0;
    var Val = 0;

    //  Convert to a percentage
    r = r / 255; g = g / 255; b = b / 255;
    var minRGB = Math.min(r, g, b);
    var maxRGB = Math.max(r, g, b);

    // Check for a grayscale image
    if (minRGB == maxRGB) {
        Val = parseInt((minRGB * 100) + .5); // Round up
        return [Hue, Sat, Val];  
    }
    var d = (r == minRGB) ? g - b : ((b == minRGB) ? r - g : b - r);
    var h = (r == minRGB) ? 3 : ((b == minRGB) ? 1 : 5);
    Hue = parseInt(60 * (h - d / (maxRGB - minRGB)));
    Sat = parseInt((((maxRGB - minRGB) / maxRGB) * 100) + .5);
    Val = parseInt((maxRGB * 100) + .5); // Round up
    return [Hue, Sat, Val];
}
function hsv2rgb(h, s, v) {
    // Set up rgb values to work with 
    var r;
    var g;
    var b;

    // Sat and value are expressed as 0 - 100%
    // convert them to 0 to 1 for calculations  
    s /= 100;
    v /= 100;

    if (s == 0) {
        v = Math.round(v * 255); // Convert to 0 to 255 and return 
        return [v, v, v]; //  Grayscale, just send back value
    }

    h /= 60;   // Divide by 60 to get 6 sectors (0 to 5)

    var i = Math.floor(h);  // Round down to nearest integer
    var f = h - i;
    var p = v * (1 - s);
    var q = v * (1 - s * f);
    var t = v * (1 - s * (1 - f));

    // Each sector gets a different mix
    switch (i) {
        case 0:
            r = v;
            g = t;
            b = p;
            break;
        case 1:
            r = q;
            g = v;
            b = p;
            break;
        case 2:
            r = p;
            g = v;
            b = t;
            break;
        case 3:
            r = p;
            g = q;
            b = v;
            break;
        case 4:
            r = t;
            g = p;
            b = v;
            break;
        default:
            r = v;
            g = p;
            b = q;
            break;
    }
    //  Convert all decimial values back to 0 - 255
    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
// Accept and add a Hue, Saturation, or Value for tinting. 
function makeTint(h, s, v) {
    //  Converts color to b&w, then adds tint
    var imgData = getSafeImageData(0, 0, canvas.width, canvas.height);

    if (imgData != "") {
        for (y = 0; y < imgData.height; y++) {
            for (x = 0; x < imgData.width; x++) {
                var i = ((y * imgData.width) + x) * 4;  // our calculation
                //  Get average value to convert each pixel to black and white
                var aveColor = parseInt((imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3)
                //  Get the HSV value of the pixel
                var hsv = rgb2hsv(aveColor, aveColor, aveColor);
                //  Add incoming HSV values (tones)
                var tint = hsv2rgb(hsv[0] + h, hsv[1] + s, hsv[2] + v);
                // Put updated data back
                imgData.data[i] = tint[0];
                imgData.data[i + 1] = tint[1];
                imgData.data[i + 2] = tint[2];
            }
        }
        // Refresh the canvas with updated colors
        ctx.putImageData(imgData, 0, 0);
    }
}

function sepia() {
    // Refresh the canvas from the img element
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    makeTint(30, 30, 0);

}
function cyanotype() {
    // Refresh the canvas from the img element
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    makeTint(220, 40, 10);
}


요약

Canvas에서 픽셀 값을 가져와서 수행할 수 있는 다른 작업이 많이 있습니다. 예를 들면, 특정 색 값에 대한 샘플 픽셀을 테스트하거나, 간단한 크로마키(그린 스크린) 효과를 위해 다른 이미지를 겹칠 수 있습니다. 이 효과는 TV 및 영화에서 스튜디오에 있는 기상 캐스터가 격렬한 폭풍우 속에 서 있거나, 또는 배우가 산 정상에 오른 것처럼 이미지를 합성하는 데 사용됩니다.

관련 항목

Canvas 요소
Canvas 속성
MSDN 샘플 사이트
Contoso 이미지 사진 갤러리
HSL 및 HSV Wikipedia 자료
Method 메서드
게임용 HTML 5 Canvas의 기능 사용

 

 

표시:
© 2014 Microsoft