利用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('');        console.info("计算的Hash", spark.end());    };});

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

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

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

关键字:JavaScript, html5, 上传图片

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部