应用HTML5 file api读取图片举行当地操纵

2019年8月30日 153次阅读 来源: 朕知道了

需求场景：须要用户上传一张照片，返回给用户一个唯一的效果，比方测试类网页你具有哪一种女人气质？（挪动端）
实在这类需求（不须要保留图片）的话，只须要在当地处置惩罚图片即可，不须要将图片上传到服务器。盘算图片的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=”” target=”_blank”>http://static.jsbin.com/js/embed.min.js?3.36.10″></script>

之前做的一个运动页面，上传照片测气质，只在当地操纵图片，并依据MD5值返回唯一效果：

《应用HTML5 file api读取图片举行当地操纵》

    原文作者：朕知道了
    原文地址: https://segmentfault.com/a/1190000005822350
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞