sitelink1 | http://blog.naver.com/shadowbug/220741761678 |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | |
extra_vars5 | |
extra_vars6 |
캔버스에 그려진 이미지를 직접 제어해야 할 필요성이 있을 때 사용한다.
|
설명 |
getImageData(x, y, width, height) |
canvas의 (x, y)위치의 (width, height) 의 이미지를 추출한다. |
putImageData(imgData, x, y); |
canvas의 (x, y) 위치에 imageData를 주입한다. |
아래 예제는 클릭한 곳의 이미지 추출 예제이다.
아래 예제를 한번 본 다면, 캔버스 내 이미지 제어를 하는 방법을 어느정도 감을 잡게 될 것이다.
html
-
<body onload="load(this)">
-
<div id="result" class="result">
-
</div>
-
<canvas id="draw" onclick="draw(event)" width="300px" height="300px;"></canvas>
-
</body>
javascript
-
-
var ctx = null;
-
-
function load(target) {
-
// 실제로 그려지는 위치의 캔버스 생성
-
var canvas = document.getElementById("draw");
-
ctx = canvas.getContext("2d");
-
-
-
var img = new Image();
-
img.src = "test.jpg";
-
img.onload = function() {
-
ctx.drawImage(img, 0, 0);
-
}
-
}
-
-
-
function draw(event) {
-
var x = event.offsetX;
-
var y = event.offsetY;
-
-
var pixel = ctx.getImageData(x, y, 1, 1);
-
var data = pixel.data;
-
-
var rgbaText = "rgba(" + data[0] + ", " + data[1] + ", " + data[2] + ", " + data[3] + ")";
-
var result = document.getElementById("result");
-
var title = result.getElementsByClassName("title")[0];
-
title.innerHTML = rgbaText;
-
var colors = result.getElementsByClassName("color");
-
for(var i=0; i<colors.length; i++) {
-
colors[i].style.background = rgbaText;
-
}
-
}
-
-
-
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
85 | HTML5 강좌 9강 - HTML5 태그 - canvas 다각형 | 황제낙엽 | 2016.12.03 | 52 |
84 | HTML5 강좌 8강 - HTML5 태그 - canvas 선그리기 | 황제낙엽 | 2016.12.03 | 51 |
83 | HTML5 강좌 7강 - HTML5 태그 - canvas 사각형 | 황제낙엽 | 2016.12.03 | 38 |
82 | HTML5 강좌 6강 - HTML5 태그 - canvas #1 | 황제낙엽 | 2016.12.03 | 133 |
81 | HTML5 강좌 5강 - HTML5 태그 - prograss,download | 황제낙엽 | 2016.12.03 | 66 |
80 | HTML5 강좌 4강 - HTML5 태그 - mark,time,meter | 황제낙엽 | 2016.12.03 | 61 |
79 | HTML5 강좌 3강 - HTML5 레이아웃 잡아보기 | 황제낙엽 | 2016.12.03 | 51 |
78 | HTML5 강좌 2강 - HTML5 시맨틱웹을 위한 구성요소 | 황제낙엽 | 2016.12.03 | 246 |
77 | HTML5 강좌 1강 - HTML5 개념 및 기본구조 | 황제낙엽 | 2016.12.03 | 59 |
76 | HTTP 오류 코드의 종류 | 황제낙엽 | 2016.12.01 | 77 |
75 | Multiple Canvas Layer 예제 | 황제낙엽 | 2016.08.23 | 31 |
74 | Canvas 개요 | 황제낙엽 | 2016.08.22 | 69 |
73 | Canvas 확대 | 황제낙엽 | 2016.08.22 | 64 |
72 | Canvas setTransform 함수 | 황제낙엽 | 2016.08.22 | 69 |
71 | Canvas 회전 | 황제낙엽 | 2016.08.22 | 71 |
70 | Canvas 영역 선택 | 황제낙엽 | 2016.08.22 | 77 |
69 | Canvas CanvasRenderingContext2D Context 속성 | 황제낙엽 | 2016.08.22 | 19 |
68 | Canvas 도형의 클릭 이벤트 처리 | 황제낙엽 | 2016.08.22 | 263 |
» | Canvas 이미지 추출 | 황제낙엽 | 2016.08.22 | 122 |
66 | Canvas 더블버퍼링 | 황제낙엽 | 2016.08.22 | 195 |