canvas와 D3.js로 이미지의 휘도 히스토그램 만들기
휘도 히스토그램
이미지의 밝기와 품질을 조사하기 위해 이미지의 밝기 분포 상황을 히스토그램을 취할 수 있습니다.
YUV의 Y를 계산하고 각 값을 계산하고 D3.js에서 그래프를 출력하려고합니다.
histogram.html<!DOCTYPE html>
<html>
<head>
<script src="./jquery-2.1.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
function drawGraph(ys) {
//d3.js でグラフを描画する。
//グラフを描画するSVGを用意
var w = 500;
var h = 300;
var barPadding = 1;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//受け取ったデータを元にヒストグラムを作成する
svg.selectAll("rect")
.data(ys)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w/ys.length);
})
.attr("y", function(d) {
return h - d/8;
})
.attr("width", w/ys.length - barPadding)
.attr("height", function(d) {
return d/8;
});
}
function fail(e) {
//エラーの時のメソッド
alert(e);
}
function getYArray(data) {
var ys = new Array(256);
for (var i = 0; i < ys.length;i++) {
ys[i] = 0;
}
for (var i = 0; i < data.length; i= i + 4) {
// 輝度(YUVのY)の計算を行う
var y = ~~(0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]);
// 輝度の値ごとのカウント
ys[y]++;
}
return ys;
}
function calcY() {
var dfd = new $.Deferred;
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 imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);
var ys = getYArray(imagedata.data);
dfd.resolve(ys);
};
return dfd.promise();
}
window.onload = function() {
calcY().then(drawGraph, fail);
};
</script>
</head>
<body>
<canvas id="c1" width="300" height="300">
</body>
</html>
다양한 이미지의 결과는 다음과 같습니다.
어두운 이미지일수록 왼쪽(0에 가까운 분)의 값이 커져 있는 것을 알 수 있습니다.
Reference
이 문제에 관하여(canvas와 D3.js로 이미지의 휘도 히스토그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sassy_watson/items/c72139f9ea24503b462d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-2.1.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
function drawGraph(ys) {
//d3.js でグラフを描画する。
//グラフを描画するSVGを用意
var w = 500;
var h = 300;
var barPadding = 1;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//受け取ったデータを元にヒストグラムを作成する
svg.selectAll("rect")
.data(ys)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w/ys.length);
})
.attr("y", function(d) {
return h - d/8;
})
.attr("width", w/ys.length - barPadding)
.attr("height", function(d) {
return d/8;
});
}
function fail(e) {
//エラーの時のメソッド
alert(e);
}
function getYArray(data) {
var ys = new Array(256);
for (var i = 0; i < ys.length;i++) {
ys[i] = 0;
}
for (var i = 0; i < data.length; i= i + 4) {
// 輝度(YUVのY)の計算を行う
var y = ~~(0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]);
// 輝度の値ごとのカウント
ys[y]++;
}
return ys;
}
function calcY() {
var dfd = new $.Deferred;
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 imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);
var ys = getYArray(imagedata.data);
dfd.resolve(ys);
};
return dfd.promise();
}
window.onload = function() {
calcY().then(drawGraph, fail);
};
</script>
</head>
<body>
<canvas id="c1" width="300" height="300">
</body>
</html>
Reference
이 문제에 관하여(canvas와 D3.js로 이미지의 휘도 히스토그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sassy_watson/items/c72139f9ea24503b462d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
