阿勇的blog: html5版的馬賽克

2013年2月6日星期三

html5版的馬賽克

利用 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);
        }
    }
}

沒有留言:

張貼留言

2013年2月6日 星期三

html5版的馬賽克

沒有留言:

2013年2月6日星期三