캔버스로 이미지 처리 (네거티브 포지션 변환/그레이 스케일 변환)
var data = context.getImageData(x, y, width, height);
라고 하는 것이 있어, 이것에 의해 Canvas의 데이터열을 취득할 수 있습니다.
data.data는
RGBA 순서의 배열로 되어 있어 이것을 조작해 Canvas에 다시 put 하는 것으로 화상을 어떠한 처리해 표시할 수가 있습니다.
이번에는 아래의 이미지를 사용하여 네거티브 포지션 변환과 그레이 스케일 변환을 해보겠습니다.
(덧붙여서 사진은 이전에 찍어 주신 CANDY GO!GO!의 나츠키 아일씨입니다.)
덧붙여서 샘플을 움직일 때, file:의 이미지를 Canvas에 읽어들이면, Canvas가 오염 상태가 되어, getImageData()를 할 수 없게 되므로,
현재 디렉토리에서 웹 서버를 즉시 실행 등을 참고로 서버를 기동시켜 확인해 주세요.
네거티브 포지션 변환
네거티브 포지션 변환이란, 흑이면 흰색이라고 하는 것처럼, 색 정보를 반전시키는 처리입니다.
각 색 정보를 255-x로 계산하여 구합니다.
아래가 샘플입니다.
<!DOCTYPE html>
<html>
<head>
<title>画像処理</title>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("c1");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "test.jpg";
img.onload = function() {
ctx.drawImage(img, 0, 0);
var src = ctx.getImageData(0, 0, canvas.width, canvas.height);
var dst = ctx.createImageData(canvas.width, canvas.height);
//ネガポジ変換
for (var i = 0; i < src.data.length; i=i+4) {
dst.data[i] = 255 - src.data[i]; //R
dst.data[i+1] = 255 - src.data[i+1]; //G
dst.data[i+2] = 255 - src.data[i+2]; //B
dst.data[i+3] = src.data[i+3]; //A
}
ctx.putImageData(dst, 0, 0);
};
};
</script>
</head>
<body>
<canvas id="c1" width="300" height="300">
</body>
</html>
이렇게하면 다음과 같이됩니다.
그레이 스케일 변환
그레이스케일이란 이미지를 흑백과 그 중간색(회색)으로 표현한 이미지로 RGB의 값이 같은 값이 됩니다.
이번은 간단하기 때문에, 값을 R, G, B 3개의 평균을 취하는 것으로, 그레이 스케일로 변환하려고 합니다.
<!DOCTYPE html>
<html>
<head>
<title>画像処理</title>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("c1");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "test.jpg";
img.onload = function() {
ctx.drawImage(img, 0, 0);
var src = ctx.getImageData(0, 0, canvas.width, canvas.height);
var dst = ctx.createImageData(canvas.width, canvas.height);
for (var i = 0; i < src.data.length; i=i+4) {
var pixel = (src.data[i] + src.data[i+1] + src.data[i+2]) / 3;
dst.data[i] = dst.data[i+1] = dst.data[i+2] = pixel;
dst.data[i+3] = src.data[i+3];
}
ctx.putImageData(dst, 0, 0);
};
};
</script>
</head>
<body>
<canvas id="c1" width="300" height="300">
</body>
</html>
아래는 그 출력 결과입니다.
이상과 같이, 캔버스를 사용하면 화상 처리의 알고리즘으로 화상을 여러가지 가공할 수 있습니다.
Reference
이 문제에 관하여(캔버스로 이미지 처리 (네거티브 포지션 변환/그레이 스케일 변환)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sassy_watson/items/676af253d8425ce0f8fc
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<title>画像処理</title>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("c1");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "test.jpg";
img.onload = function() {
ctx.drawImage(img, 0, 0);
var src = ctx.getImageData(0, 0, canvas.width, canvas.height);
var dst = ctx.createImageData(canvas.width, canvas.height);
//ネガポジ変換
for (var i = 0; i < src.data.length; i=i+4) {
dst.data[i] = 255 - src.data[i]; //R
dst.data[i+1] = 255 - src.data[i+1]; //G
dst.data[i+2] = 255 - src.data[i+2]; //B
dst.data[i+3] = src.data[i+3]; //A
}
ctx.putImageData(dst, 0, 0);
};
};
</script>
</head>
<body>
<canvas id="c1" width="300" height="300">
</body>
</html>
그레이스케일이란 이미지를 흑백과 그 중간색(회색)으로 표현한 이미지로 RGB의 값이 같은 값이 됩니다.
이번은 간단하기 때문에, 값을 R, G, B 3개의 평균을 취하는 것으로, 그레이 스케일로 변환하려고 합니다.
<!DOCTYPE html>
<html>
<head>
<title>画像処理</title>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("c1");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "test.jpg";
img.onload = function() {
ctx.drawImage(img, 0, 0);
var src = ctx.getImageData(0, 0, canvas.width, canvas.height);
var dst = ctx.createImageData(canvas.width, canvas.height);
for (var i = 0; i < src.data.length; i=i+4) {
var pixel = (src.data[i] + src.data[i+1] + src.data[i+2]) / 3;
dst.data[i] = dst.data[i+1] = dst.data[i+2] = pixel;
dst.data[i+3] = src.data[i+3];
}
ctx.putImageData(dst, 0, 0);
};
};
</script>
</head>
<body>
<canvas id="c1" width="300" height="300">
</body>
</html>
아래는 그 출력 결과입니다.
이상과 같이, 캔버스를 사용하면 화상 처리의 알고리즘으로 화상을 여러가지 가공할 수 있습니다.
Reference
이 문제에 관하여(캔버스로 이미지 처리 (네거티브 포지션 변환/그레이 스케일 변환)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sassy_watson/items/676af253d8425ce0f8fc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
