HTML 5は携帯電話の写真アップロードを実現

<input type="file" accept="image/*" capture="camera" >

//  cursor      ，              
button{
     cursor:pointer;
     pointer-events:none;
}

<style >
    *{
        padding: 0;
        margin: 0;
    }
    .wrapper{
        width: 320px;
        height: 50px;
        margin: 20px auto;
        position: relative;
        border: 1px solid #f0f0f0;
    }
    input{
        width: 100px;
        height: 30px;
    }
    button{
        position: absolute;
        cursor: pointer;
        pointer-events: none;
        width: 100px;
        height: 30px;
        left: 0;
        top: 0;
    }
    a{
        pointer-events: none;
    }
    .img{
        border: 1px solid #ccc;
        padding: 10px;
    }
style >

<div class = "wrapper">
     <input type = "file" accept= "image/*" capture= "camera" id= "img" />
     <button >     button >
div >

document.getElementById( 'img').addEventListener( 'change', function () {
     var reader = new FileReader();
     reader.onload = function (e) {
          //        ：compress();
     };
     reader.readAsDataURL(this.files[0]);
     console.log(this.files[0]);
     var fileSize = Math.round( this.files[0].size/1024/1024) ; // M   
     //this.files[0]      ：     ， byte     size     ：this.files[0].size;
}, false);

//      ：
1、           or   ；
2、      ，       size  ，        。

function compress(res,fileSize) { //res       ，fileSize       
    var img = new Image(),
        maxW = 640; //      

    img.onload = function () {
        var cvs = document.createElement( 'canvas'),
            ctx = cvs.getContext( '2d');

        if(img.width > maxW) {
            img.height *= maxW / img.width;
            img.width = maxW;
        }

        cvs.width = img.width;
        cvs.height = img.height;

        ctx.clearRect(0, 0, cvs.width, cvs.height);
        ctx.drawImage(img, 0, 0, img.width, img.height);

        var compressRate = getCompressRate(1,fileSize);

        var dataUrl = cvs.toDataURL( 'image/jpeg', compressRate);

        document.body.appendChild(cvs);
        console.log(dataUrl);
    }

    img.src = res;
}

function getCompressRate(allowMaxSize,fileSize){ //      ，size   MB
      var compressRate = 1;

      if(fileSize/allowMaxSize > 4){
           compressRate = 0.5;
      } else if(fileSize/allowMaxSize >3){
           compressRate = 0.6;
      } else if(fileSize/allowMaxSize >2){
           compressRate = 0.7;
      } else if(fileSize > allowMaxSize){
           compressRate = 0.8;
      } else{
           compressRate = 0.9;
      }

      return compressRate;
}

//  nodeJS base64     
var express = require('express');
var fs = require("fs");
var app = module.exports = express();

function dataToImage(dataUrl){
    var base64Data = dataUrl.replace(/^data:image\/\w+;base64,/,'');
    var dataBuffer = new Buffer(base64Data,'base64');

    fs.writeFile('out.jpg',dataBuffer,function(err){
        if(err){
            console.log(err);
        }else{
            console.log('Success...');
        }
    });
}

dataToImage('data:image/jpeg;base64,/9...'); //    base64  ，    ...

if(!module.parent){
    app.listen(8000);
    console.log('Express started on port 8000');
}