자바스크립트로 png 힌색 부분을 투명으로 만들기
자바스크립트를 이용한 png 이미지의 바탕화면 부분이 힌색인 경우 투명으로 만들어 주는 프로그램 입니다.
* 자바스크립트로 png 힌색 부분을 투명으로 변경
아래 샘플은 완전한 힌색일경우 알파값을 0으로 변경하여 투명으로 변경하는 예제 입니다.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
body { background-color: #00f; margin: 0px; padding: 0px; }
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
</head>
<body>
<img src="test.png">
<img src="test.png">
</body>
<script type="text/javascript">
$(function() {
$("img").each(function() {
var $this = $(this);
var tim = $this.get(0);
var idx = $this.index();
var canvas = null;
var ctx = null;
var img = new Image();
img.onload = function() {
copyImageToCanvas(img);
};
img.setAttribute("src", tim.src);
function copyImageToCanvas(aImg) {
canvas = document.createElement("canvas");
var w = typeof aImg.naturalWidth == "undefined" ? aImg.width : aImg.naturalWidth;
var h = typeof aImg.naturalHeight == "undefined" ? aImg.height : aImg.naturalHeight;
canvas.id = "img" + idx;
canvas.width = w;
canvas.height = h;
$this.replaceWith(canvas);
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, w, h);
ctx.drawImage(aImg, 0, 0);
makeTransparent(aImg);
}
function makeTransparent(aImg) {
var w = typeof aImg.naturalWidth == "undefined" ? aImg.width : aImg.naturalWidth;
var h = typeof aImg.naturalHeight == "undefined" ? aImg.height : aImg.naturalHeight;
var imageData = ctx.getImageData(0, 0, w, h);
for (var x = 0; x < imageData.width; x++)
for (var y = 0; y < imageData.height; y++) {
var offset = (y * imageData.width + x) * 4;
var r = imageData.data[offset];
var g = imageData.data[offset + 1];
var b = imageData.data[offset + 2];
//if it is pure white, change its alpha to 0
if (r == 255 && g == 255 && b == 255) {
imageData.data[offset + 3] = 0;
}
};
ctx.putImageData(imageData, 0, 0);
}
});
});
</script>
</html>
위 부분에서 아래에 해당하는 부분이 주명으로 만들어 주는 부분인데요. 완전한 힌색이 아닌 힌색과 가까운것까지 투명으로 만들어 주고 싶으면 아래와 같이 범위를 넓게 주면 됩니다.
전처리 과정을 통해서 어느부분이 핵심이고 처리하지 말아야할 부분에 대한것은 없기 때문에 일부 원하지 않는 부분까지 투명으로 바뀔 수는 있습니다.
// 힌색과 가까운것을 투명으로 변경
if (r == 235 && g == 235 && b == 235) {
imageData.data[offset + 3] = 0;
}
* 참고자료