资讯专栏INFORMATION COLUMN

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

MobService / 3130人阅读

摘要:实现方法如下创建对象基于每块文件读取完毕之后的处理计算的之前做的一个活动页面,上传照片测气质,只在本地操作图片,并根据值返回唯一结果

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79810.html

相关文章

  • 上传图片本地预览效果实现(兼容IE8)

    摘要:以上传图片为例。我们可以通过获取上传的图片相关信息,但是想要实现本地预览还需要借助来实现可以读取本地图片,并将图片数据转换成编码的字符串形式嵌入到页面中。在我们实现上传图片的效果里,就有用到。图片预览兼容处理及以下版本不支持和。 最近项目里需要用到上传图片并预览的功能,于是写了个jQuery预览图片插件,下载地址。如果有需要的,可以直接下载。第一次写jQuery插件,如有不对之处,欢迎...

    avwu 评论0 收藏0

发表评论

0条评论

MobService

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<