码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2020-05-23 00:26:51      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:onload   使用   tps   本地   read   服务器   info   dev   embed   

需求场景:需要用户上传一张照片,返回给用户一个唯一的结果,比如测试类网页你拥有哪种女人气质?(移动端)
其实这种需求(不需要保存图片)的话,只需要在本地处理图片即可,不需要将图片上传到服务器。计算图片的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值返回唯一结果:

技术图片

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

标签:onload   使用   tps   本地   read   服务器   info   dev   embed   

原文地址:https://www.cnblogs.com/jlfw/p/12940313.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!