利用HTML5 file api读取图片进行本地操做

需求场景：须要用户上传一张照片，返回给用户一个惟一的结果，好比测试类网页你拥有哪一种女人气质？（移动端）
其实这种需求（不须要保存图片）的话，只须要在本地处理图片便可，不须要将图片上传到服务器。计算图片的md5值能够确保惟一性。
针对这个需求，能够使用HTML5 file api来读取文件。实现方法以下：

document.getElementById("file").addEventListener("change", function() {
    var fileReader = new FileReader(), box = document.getElementById('box'),
    //建立md5对象（基于SparkMD5）
    spark = new SparkMD5();
    //每块文件读取完毕以后的处理
    fileReader.onload = function(e) {
        console.log("finished loading");
        $('#box').append('<img src="'+e.target.result+'">');
        console.info("计算的Hash", spark.end());
    };
});

demo:
http://jsbin.com/zoputihuqe/edit?html,css,js,output

JS Bin on jsbin.com<script src="http://static.jsbin.com/js/embed.min.js?3.36.10"></script>

以前作的一个活动页面，上传照片测气质，只在本地操做图片，并根据MD5值返回惟一结果：