| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Grayscale Image Test</title>
<style type="text/css">
table {margin:auto;}
</style>
</head>
<body style="background-color: #eeeeee;" mce_style="background-color: #eeeeee;">
<table>
<tr align="center"><td colspan="2"><h3>Grayscale Image Test</h3><hr height="1px"/></td>
</tr>
<tr>
<td align="right">
<button id="invertImage" onclick="invertImage();return true;">Invert</button>
<button id="invertImage" onclick="loadImage(girlUri);return true;">Reset</button>
<button id="smpteImage" onclick="loadImage(smpteUri);return true;">SMPTE</button>
<button id="ctImage" onclick="loadImage(ctUri);return true;">CT</button>
</td>
<td>
</td>
</tr>
<tr align="center">
<td><canvas id="imageviewer" width="512px" height="512px" style="border: 1px solid;" mce_style="border: 1px solid;" /></td>
<td><canvas id="statistic" width="256" height="512px" style="border: 1px solid;" mce_style="border: 1px solid;" /></td>
</tr>
<tr align="center"><td colspan="2">© May, 2011, lifegame@263.net</td>
</tr>
</table>
</body>
<script>
var ctUri = 'ct.jpg';
var smpteUri = 'smpte.gif';
var girlUri = 'dmtjc5016.gif';
var icanvas = document.getElementById('imageviewer');
var icanvasWidth = parseInt(icanvas.getAttribute("width"));
var icanvasHeight = parseInt(icanvas.getAttribute("height"));
var icontext = icanvas.getContext('2d');
var scanvas = document.getElementById('statistic');
var scanvasWidth = parseInt(scanvas.getAttribute("width"));
var scanvasHeight = parseInt(scanvas.getAttribute("height"));
var scontext = scanvas.getContext('2d');
function loadImage(uri){
var img = new Image();
img.src = uri;
img.onload = function(){
icontext.drawImage(img,0,0);
loadStatistic();
};
}
function loadStatistic(){
var imgData = icontext.getImageData(0,0,icanvasWidth,icanvasHeight);
var pixTotal = imgData.height*imgData.width;
var pixCount = [];
for(i=0;i<256;i++) pixCount[i]=0;
for(y=0;y<imgData.height;y++){
for(x=0;x<imgData.width;x++){
var pv = Math.min(255,imgData.data[(y*imgData.width+x)*4]);
pixCount[pv]++;
}
}
scontext.clearRect(0,0,scanvasWidth,scanvasHeight);
var stImg = scontext.getImageData(0,0,scanvasWidth,scanvasHeight);
for(x=0;x<256;x++){
var c = pixCount[x];
var h = stImg.height - Math.round(stImg.height*c/pixTotal);
for(y=h;y<stImg.height;y++){
var i = (y*stImg.width+x)*4;
stImg.data[i]=stImg.data[i+1]=stImg.data[i+2]=0;
stImg.data[i+3]=255;
}
}
scontext.putImageData(stImg,0,0);
}
function invertImage(){
var imgData = icontext.getImageData(0,0,icanvasWidth,icanvasHeight);
for(y=0;y<imgData.height;y++){
for(x=0;x<imgData.width;x++){
var i = (y*imgData.width+x)*4;
var pv = Math.abs(255-imgData.data[i]);
imgData.data[i]=imgData.data[i+1]=imgData.data[i+2]=pv;
}
}
icontext.putImageData(imgData,0,0);
loadStatistic();
}
window.addEventListener("load", loadImage(girlUri), true);
</script>
<html>
|
(责任编辑：12图资源库)
