- 利用 input type="file"選取本地端圖檔
- 用FileReader的readAsDataURL讀取圖檔
- 將圖畫到canvas
- 用range來當sliderbar,注意firefox不支援range
- 接下來就是拿canvas來做影像處理了
- 最後,再利用canvas.toDataURL("image/jpeg")轉回圖檔
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mosaic</title>
</head>
<body>
<input type="file" id="input" /><br/>
<canvas id="result" ></canvas>
<script src="jquery-1.9.0.min.js"></script>
<script src="mosaic.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
var img;
var rect = new Object();
function reset_img(evt) {
mosaic($("#result")[0], img, rect, $('#input').val());
}
function loaded_picture(evt) {
var image = new Image();
image.onload = function(evt) {
img = this;
var result = $("#result").attr({
width : img.width,
height : img.height
});
var ctx = result[0].getContext("2d");
ctx.drawImage(img, 0, 0);
rect.left = 0;
rect.top = 0;
rect.width = img.width;
rect.height = img.height;
max = (img.width > img.height) ? img.height : img.width;
max = max/4;
$('#input').off().attr({
type : "range",
min : 1,
max : max,
value : 1,
step : 10
}).change(reset_img);
;
};
image.src = evt.target.result;
}
function load_picture(evt) {
var f = evt.target.files[0];
var reader = new FileReader();
reader.onload = loaded_picture;
// reads in desired format that Image will acept
reader.readAsDataURL(f);
}
function init() {
// pictfile is an input type="file" HTML element in page
$('#input').change(load_picture);
}
window.onload = init;
mosaic.js
function mosaic(canvas, image, rect, blockSize) {
var w = rect.width;
var h = rect.height;
blockSize = Math.max(1, blockSize);
var w4 = w * 4;
var y = h;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
if(blockSize==1)return;
var pixel = document.createElement("canvas");
pixel.width = pixel.height = 1;
var pixelCtx = pixel.getContext("2d");
for (var y = 0; y < h; y += blockSize) {
for (var x = 0; x < w; x += blockSize) {
pixelCtx.drawImage(image, x, y, blockSize, blockSize, 0, 0, 1, 1);
var data = pixelCtx.getImageData(0, 0, 1, 1).data;
ctx.fillStyle = "rgb(" + data[0] + "," + data[1] + "," + data[2] + ")";
ctx.fillRect(rect.left + x, rect.top + y, blockSize, blockSize);
}
}
}
沒有留言:
張貼留言