HTML5实例教程:圣诞彩蛋(六)

这是该系列教程的最后一篇了.

最后我们完成的是上传文件和访问指定图片的功能,由于内容简单并没什么好说的,所以直接放出完整的源代码了.

其实还可以加上图片的缩放功能,不过这部分就作为留给读者们的作业吧(其实是我自己不想写啦).

完整代码index.php:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset='UTF-8'/>
    <title>圣诞彩蛋</title>
<style>  
    body{
        text-align:center;
        background:#E6E7E8;
    }
</style>  
</head>  
<body>  
<?php  
function get($index){  
    return empty($_GET[$index])?null:$_GET[$index];
}

function files($index){  
    return empty($_FILES[$index])?null:$_FILES[$index];
}

switch ($_SERVER['REQUEST_METHOD']) {  
    case 'POST':
        $image_file=files('image');
        if(isset($image_file)){
            if(!is_dir('image')){
                mkdir('image');
            }
            if(is_uploaded_file($image_file['tmp_name'])){
                $image_md5=md5_file($image_file['tmp_name']);
                if(file_exists('image/'.$image_md5.'.png')){
                    echo $md5_image;
                    return;
                }else{
                  if (substr($image_file['type'],0,5)=='image'){
                      if (move_uploaded_file($image_file['tmp_name'],'image/'.$image_md5.'.png')){
                        echo '<a href="index.php?id='.$image_md5.'">制作成功点此查看</a>';
                        return;
                      }
                  }
                }
            }
        }
        echo 'null';
        break;

    default:
        $id=get('id');
?>
<canvas width='512' height='512'></canvas><br/>  
<script>  
var canvas = document.querySelector('canvas');  
var ctx = canvas.getContext('2d');  
var img = new Image();  
img.onload = function() {  
    var canvas2 = document.createElement('canvas');
    canvas2.width = canvas2.height = 512;
    var ctx2 = canvas2.getContext('2d');
    ctx2.drawImage(img, 0, 0);
    var data = ctx2.getImageData(0, 0, 512, 512).data;

    function r(r2, data) {
        if(r2 != 512) {
            var rs = r2 * r2;
            var points = Math.pow(512 / r2, 2);
            var r = new Uint8ClampedArray(points * 3);
            var size = Math.sqrt(points);
            for(var i = 0; i < points; i++) {
                var red = 0,
                    green = 0,
                    blue = 0;
                var xBegin = i % size * r2,
                    yBegin = Math.floor(i / size) * r2;
                var xEnd = xBegin + r2,
                    yEnd = yBegin + r2;
                for(var x = xBegin; x < xEnd; x++) {
                    for(var y = yBegin; y < yEnd; y++) {
                        var j = (y * 512 + x) * 4;
                        red += data[j];
                        green += data[j + 1];
                        blue += data[j + 2];
                    }
                }
                r[i * 3] = red / rs;
                r[i * 3 + 1] = green / rs;
                r[i * 3 + 2] = blue / rs;
            }
        } else {
            var r = new Uint8ClampedArray(3);
            var red = 0,
                green = 0,
                blue = 0;
            for(var i = data.length; i -= 4;) {
                red += data[i];
                green += data[i + 1];
                blue += data[i + 2];
            }
            r[0] = red / 262144;
            r[1] = green / 262144;
            r[2] = blue / 262144;
        }
        return r;
    }

    function rgb(r, g, b) {
        return 'rgb(' + r + ',' + g + ',' + b + ')';
    }
    var rData = [];
    rData[512] = r(512, data);
    rData[256] = r(256, data);
    rData[128] = r(128, data);
    rData[64] = r(64, data);
    rData[32] = r(32, data);
    rData[16] = r(16, data);
    rData[8] = r(8, data);
    rData[4] = r(4, data);
    rData[2] = r(2, data);

    function drawRound(r, r2, cX, cY, x, y) {
        ctx.save();
        var i = (512 / r2 * y + x) * 3;
        ctx.fillStyle = rgb(r[i], r[i + 1], r[i + 2]);
        ctx.beginPath();
        ctx.arc(cX, cY, r2 / 2, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    }

    function isPointInCircle(circleX, circleY, circleRadius, mouseX, mouseY) {
        return Math.pow(mouseX - circleX, 2) + Math.pow(mouseY - circleY, 2) <= Math.pow(circleRadius, 2);
    }

    function circleData(cX, cY, cR, Px, Py, r2, a, lock) {
        return {
            'circle': {
                'x': cX,
                'y': cY,
                'r': cR
            },
            'point': {
                'x': Px,
                'y': Py
            },
            'r2': r2,
            'alpha': a,
            'lock': lock
        }
    }

    var circle512=circleData(256, 256, 256, 0, 0, 512, 100, false);
    var data = [circle512];

    function draw() {
        ctx.clearRect(0, 0, 512, 512);
        for(var i = data.length; i--;) {
            var c = data[i];
            if(c) {
                ctx.save();
                ctx.globalAlpha = c.alpha / 100;
                drawRound(rData[c.r2], c.r2, c.circle.x, c.circle.y, c.point.x, c.point.y);
                ctx.restore();
            }
        }
    }

    function drawArea(arr){
        for(var i=arr.length;i--;){
            var c=arr[i];
            var r2=c.r2;
            var r=r2/2;
            var x=c.circle.x-r,
                    y=c.circle.y-r;
            ctx.clearRect(x,y,r2,r2);
            ctx.save();
            ctx.globalAlpha = c.alpha / 100;
            drawRound(rData, r2, c.circle.x, c.circle.y, c.point.x, c.point.y);
            ctx.restore();
        }
    }
    draw();

    var last;
    canvas.addEventListener('mousemove', function(e) {
        var mouseX = e.pageX - canvas.offsetLeft,
            mouseY = e.pageY - canvas.offsetTop;
        for(var i = data.length; i--;) {
            var c = data[i];
            if(!c || c.r2 == 4 || c.lock) {
                if(c && c.r2 >= 128) {
                    return;
                }
                continue;
            }
            if(isPointInCircle(c.circle.x, c.circle.y, c.circle.r, mouseX, mouseY)) {
                if(last == c) {
                    return;
                } else {
                    last = null;
                }
                var r2 = c.r2 / 2;
                var rData = r[r2];
                var cX = c.circle.x,
                    cY = c.circle.y,
                    pX = c.point.x,
                    pY = c.point.y;
                var isLock = !(r2 <= 64);
                var alpha = isLock ? 0 : 100;
                var newC1 = circleData(cX - r2 / 2, cY - r2 / 2, r2 / 2, pX * 2, pY * 2, r2, alpha, isLock),
                    newC2 = circleData(cX + r2 / 2, cY - r2 / 2, r2 / 2, pX * 2 + 1, pY * 2, r2, alpha, isLock),
                    newC3 = circleData(cX - r2 / 2, cY + r2 / 2, r2 / 2, pX * 2, pY * 2 + 1, r2, alpha, isLock),
                    newC4 = circleData(cX + r2 / 2, cY + r2 / 2, r2 / 2, pX * 2 + 1, pY * 2 + 1, r2, alpha, isLock);
                data.push(newC1, newC2, newC3, newC4);
                c.lock = true;
                var newC = [newC1, newC2, newC3, newC4];
                for(var m = newC.length; m--;) {
                    var c = newC[m];
                    if(isPointInCircle(c.circle.x, c.circle.y, c.circle.r, mouseX, mouseY)) {
                        last = c;
                    }
                }
                if(c.r2 >= 128) {
                    (function() {
                        var j = i;
                        var old = data[j];
                        (function() {
                            if(old.alpha == 0) {
                                for(var i = newC.length; i--;) {
                                    newC[i].lock = false;
                                }
                                delete data[j];
                                draw();
                            } else {
                                for(var i = newC.length; i--;) {
                                    newC[i].alpha += 25;
                                }
                                old.alpha -= 25;
                                draw();
                                setTimeout(arguments.callee, 50);
                            }
                        })();
                    })()
                } else {
                    delete data[i];
                    draw();
                }
                return;
            }
        }
        last = null;
    });
};
<?php  
        if(isset($id)){
            echo 'img.src = "image/'.$id.'.png";';
        }else{
            echo 'img.src = "image.png";';
        }
?>
</script>  
<button>制作彩蛋</button>  
<script>  
var button=document.querySelector('button');  
button.addEventListener('click',function(){  
    button.style.display='none';
    canvas.style.display='none';
    var btn_upload=document.createElement('input'),
            btn_cancel=document.createElement('button'),
            input=document.createElement('input'),
            form=document.createElement('form');
    btn_upload.type='submit'
    btn_upload.value='上传';
    btn_cancel.innerHTML='取消';
    btn_cancel.addEventListener('click',function(){
        button.style.display='';
        canvas.style.display='';
        document.body.removeChild(form);
        document.body.removeChild(btn_cancel);
    },false);
    input.type='file';
    input.name='image';
    form.method='POST';
    form.action='';
    form.enctype='multipart/form-data';
    form.appendChild(input);
    form.appendChild(btn_upload);
    document.body.appendChild(form);
    document.body.appendChild(btn_cancel);
},false);
</script>  
</body>  
</html>  
<?php  
        break;
}
?>