캔버스로 이미지 이진화
이미지의 이진화
화상의 화소를 백색 또는 검정색의 2층 초과로 변환하는 처리를 2치화라고 합니다.
임계값
이미지의 이진화의 흰색인지 검정인지를 판별하기 위한 임계값을 깨끗하게 해야 합니다.
역치의 설정은 히스토그램을 작성해, 그 산이 2개 있는 경우 그 산 사이의 계곡에 역치를 설정하면, 잘 2치화할 수 있는 것 같습니다.
이전에 만든 휘도의 히스토그램을 사용해 보겠습니다.
대체로 65를 경계로 색을 바꾸어 보면 좋은 느낌이 되었으므로,
65를 임계값으로 설정합니다.
이진화 프로그램
binarization.html<!DOCTYPE html>
<html>
<head>
<title>画像処理</title>
<script type="text/javascript">
const THRESHOLD = 65;
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 y = ~~(0.299 * src.data[i] + 0.587 * src.data[i + 1] + 0.114 * src.data[i + 2]);
var ret = (y > THRESHOLD) ? 255 : 0;
dst.data[i] = dst.data[i+1] = dst.data[i+2] = ret;
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/bdd486cbdc4188b6bbb0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이미지의 이진화의 흰색인지 검정인지를 판별하기 위한 임계값을 깨끗하게 해야 합니다.
역치의 설정은 히스토그램을 작성해, 그 산이 2개 있는 경우 그 산 사이의 계곡에 역치를 설정하면, 잘 2치화할 수 있는 것 같습니다.
이전에 만든 휘도의 히스토그램을 사용해 보겠습니다.
대체로 65를 경계로 색을 바꾸어 보면 좋은 느낌이 되었으므로,
65를 임계값으로 설정합니다.
이진화 프로그램
binarization.html<!DOCTYPE html>
<html>
<head>
<title>画像処理</title>
<script type="text/javascript">
const THRESHOLD = 65;
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 y = ~~(0.299 * src.data[i] + 0.587 * src.data[i + 1] + 0.114 * src.data[i + 2]);
var ret = (y > THRESHOLD) ? 255 : 0;
dst.data[i] = dst.data[i+1] = dst.data[i+2] = ret;
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/bdd486cbdc4188b6bbb0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<title>画像処理</title>
<script type="text/javascript">
const THRESHOLD = 65;
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 y = ~~(0.299 * src.data[i] + 0.587 * src.data[i + 1] + 0.114 * src.data[i + 2]);
var ret = (y > THRESHOLD) ? 255 : 0;
dst.data[i] = dst.data[i+1] = dst.data[i+2] = ret;
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/bdd486cbdc4188b6bbb0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
