{% extends wide_base %}

{% block body %}

<div class="col-md-12 card">
    {% set title = "图片灰度化" %}
    {% include "common/title/base_title.html" %}
</div>

{% include tools/img_tab.html %}

<div class="card">
    <input id="file" type="file" onchange="handleFiles(this.files)" class="hide" />
    <input type="button" id="selectBtn" class="btn" value="选择图片"/>
    <input class="btn" id="rotateClockwise" type="button" value="顺时针旋转"/>
    <input id="larger" type="button" class="btn" value="刷新"/>

    <div class="col-md-12 top-offset-1">
        <div class="input-group">
            <label>图片大小</label>
            <span id="imgSize">0x0</span>
        </div>

        <div class="input-group">
            <label>宽度</label>
            <input type="text" id="width"/>
        </div>

        <div class="input-group">
            <label>高度</label>
            <input type="text" id="height"/>
        </div>

        <div class="input-group">
            <label>灰度化</label>
            <input type="checkbox" id="gray" >
        </div>

        <div class="input-group">
            <label>旋转</label>
            <span id="rotate"></span>
        </div>
    </div>
</div>

<div class="card row">
    <h3 class="card-title">输出</h3>
    <canvas id="myCanvas"></canvas>
</div>

<script type="text/javascript">
// 转换配置
var convertOpt = {};

convertOpt.gray = false;
convertOpt.rotate = 0;

function getImgNaturalDimensions(img, callback) {
    var nWidth, nHeight
    if (img.naturalWidth) { // 现代浏览器
        nWidth = img.naturalWidth
        nHeight = img.naturalHeight
    } else { // IE6/7/8
        var imgae = new Image()
        image.src = img.src
        image.onload = function() {
            callback(image.width, image.height)
        }
    }
    return [nWidth, nHeight]
}

function convert2Gray(canvasData) {
    // gray filter    
    for ( var x = 0; x < canvasData.width; x++) {    
        for ( var y = 0; y < canvasData.height; y++) {    

            // Index of the pixel in the array    
            var idx = (x + y * canvasData.width) * 4;    
            var r = canvasData.data[idx + 0];    
            var g = canvasData.data[idx + 1];    
            var b = canvasData.data[idx + 2];    
                
            // calculate gray scale value    
            var gray = .299 * r + .587 * g + .114 * b;    
                
            // assign gray scale value    
            canvasData.data[idx + 0] = gray; // Red channel    
            canvasData.data[idx + 1] = gray; // Green channel    
            canvasData.data[idx + 2] = gray; // Blue channel    
            canvasData.data[idx + 3] = 255; // Alpha channel    
            
            /*
            // add black border    
            if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))     
            {    
                canvasData.data[idx + 0] = 0;    
                canvasData.data[idx + 1] = 0;    
                canvasData.data[idx + 2] = 0;    
            }  
            */  
        }    
    }    
    return canvasData;
}

// 缩放比例
var canvasScale = 1.0;
var canvasRotate = 0;
// var imageNatureWidth = 0;
// var imageNatureHeight = 0;
function repaint() {
    var newWidth = $("#width").val() - 0;
    var newHeight = $("#height").val() - 0;

    convertOpt.gray = $("#gray")[0].checked;
    var canvas = $("#myCanvas")[0];    
    var image = window.inputImage;
    console.log(image.width, image.height);

    if (newWidth <= 0 || newWidth == undefined) {
        newWidth = image.width;
    }
    if (newHeight <= 0 || newHeight == undefined) {
        newHeight = image.height;
    }

    var resize = false;
    // get 2D render object    
    var context = canvas.getContext("2d");

    canvas.width  = newWidth;
    canvas.height = newHeight;

    if (window.canvasRotate % 180 != 0) {
        canvas.width = newHeight;
        canvas.height = newWidth;
        resize = true;
    }

    var arc = window.canvasRotate * Math.PI / 180;
    context.translate(canvas.width/2, canvas.height/2);
    context.rotate(arc);

    if (resize) {
        context.drawImage(image, 0, 0, image.width, image.height, -canvas.height/2, -canvas.width/2, canvas.height, canvas.width);  
    } else {
        context.drawImage(image, 0, 0, image.width, image.height, -canvas.width/2, -canvas.height/2, canvas.width, canvas.height);  
    }
    
    context.translate(0,0);
    if (convertOpt.gray) {    
        // 不能使用跨域图片，否则不能获取图片数据
        var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);    
        // alert(canvasData.width.toString());    
        // alert(canvasData.height.toString());    
        canvasData = convert2Gray(canvasData);
        context.putImageData(canvasData, 0, 0); // at coords 0,0   
    }

    $("#rotate").text(convertOpt.rotate);
    $("#imgSize").text(inputImage.width+"x"+inputImage.height);
};    

function handleFiles(files) {
    if (files && files.length > 0) {
        var imageFile = files[0];
        var url = window.URL.createObjectURL(imageFile);
        console.log(url);
        var image = new Image();
        image.src = url;
        window.inputImage = image;
        image.onload = function () {
            repaint();
        }
    }
}

$("#larger").on("click", function() {
    window.canvasScale += 0.1;
    repaint();
})
$("#smaller").on("click", function() {
    window.canvasScale -= 0.1;
    repaint();
});

$("#rotateClockwise").on("click", function() {
    window.canvasRotate += 90;
    if (window.canvasRotate == 360) {
        window.canvasRotate = 0;
    }
    convertOpt.rotate = canvasRotate;
    repaint();
})
$("#selectBtn").on("click", function () {
    $("#file").click();
})
$("#gray").on("change", function() {
    repaint();
})
</script>
{% end %}