正文

利用html5fileapi读取图片进行本地操作

jlfw  2022-02-13  367

关键词：

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

技术图片

html5fileapi加canvas实现图片前端js压缩并上传（转载）

一、图片上传前端压缩的现实意义对于大尺寸图片的上传，在前端进行压缩除了省流量外，最大的意义是极大的提高了用户体验。这种体验包括两方面：由于上传图片尺寸比较小，因此上传速度会比较快，交互会更加流畅，同时... 查看详情

android读取本地超大图片(代码片段)

＃android如何读取本地超大图片```javapublicstaticBitmapgetimage(StringsrcPath,intsize)//该对象为图片缩放操作对象BitmapFactory.OptionsnewOpts=newBitmapFactory.Options();//开始读入图片，该参数为true时，查看详情

arduinoesp32利用eeprom对数据进行读写操作(代码片段)

ArduinoESP32利用EEPROM对数据进行读写操作本次实验的目的，通过EEPROM对数据进行存储和读取方法测试，验证数据能的有效安全保存。本次对配网的wifi信息进行存储和读取测试。实例代码//ESP32利用EEPROM对数据进行读写操作//... 查看详情

arduinoesp32/8266利用eeprom对数据进行读写操作(代码片段)

ArduinoESP32/8266利用EEPROM对数据进行读写操作本次实验的目的，通过EEPROM对数据进行存储和读取方法测试，验证数据能的有效安全保存。本次实验对配网的wifi信息进行存储和读取测试。说明：默认配网的情况下，只要配网成功，wif... 查看详情

python根据url读取网络图片的两种方式（opencv）(代码片段)

引言我们知道OpenCV提供了一个imread()函数可以从本地磁盘读取图片并进行各种操作，但如何直接根据URL操作网络图片呢？本文介绍其两种实现方式。方法调用VideoCapture进行转换imread()函数不能直接读取网络图片，但Video... 查看详情

python根据url读取网络图片的两种方式（opencv）(代码片段)

java实现给图片添加水印(文字水印或图片水印)(代码片段)

...一、java实现给图片添加文字水印1.获取原图片对象信息1.1读取本地图片1.2读取网络图片2.添加水印3.获取目标图片4.完成代码二、java实现给图片添加图片水印1.添加图片水印方法：2.完成代码3.代码执行效果java实现给图片添加... 查看详情

19-javaweb项目读取本地图片通过虚拟路径

有时会把文件存在本地如将图片等放在c、d盘等，在javaweb引用时会出现无法直接访问的问题，但是还是有办法解决的。可以通过配置虚拟路径：步骤一：双击servers下面的tomcat，在弹出的窗口下面选择Modules进行如下配置：上面框... 查看详情

文件包含ctf题目

...ayload为<scriptlanguage=php>system("ls")</script>，利用文件包含列出当前目录，发现flag文件，再查看文件获得flag。1、链接：I春秋“百度杯”CTF比赛2017二月场502、解题方法根据提示很容易测出文件包含漏洞。发现无法写... 查看详情

浅谈本地文件包含利用

今天在公众号看到了一个本地文件包含的利用工具，看了下国外大牛对该工具的使用的一个视频，感觉很厉害，通过该工具可对存在本地文件包含漏洞的站点进行利用并返回一个LFIshell，通过返回的LFIshell再次获取一个反向连接... 查看详情

pyhton从web获取json数据保存到本地然后再读取

...是从web中获取获取数据的过程有点慢。所以就在想假设先利用空暇时间把json数据获取并保存到本地，然后再从本地文件里读取和操作。应该就要快非常多。这中间的主要问题就是格式的转换问题：1、将获取取的json数据序列化后... 查看详情

利用poi技术动态替换word模板内容

项目中需要实现一个功能，动态替换给定模板里面的内容，生成word文档提供下载功能。中间解决了问题有：1.页眉的文档logo图片解决，刚开始的时候，HWPFDocument对象无法读取图片对象（已测试）2.文档的水印也无法读取3.下载的... 查看详情

gradle读取本地json文件(代码片段)

...完全兼容Java，所以使用gradle读取本地文件的思路就是利用Java语言实现对文件的操作。代码读取文件的代码JSONObjectreadFileToJson()tryFilefile=newFile( 查看详情

gradle读取本地json文件(代码片段)

②本地图片转tfrecord及opencv安装(代码片段)

...将图像数据和标签统一存储的二进制文件，能更好的利用内存，在tensorflow中快速的复制，移动，读取，存储等。def_int64_feature(value):returntf.train.Feature(int64_list=tf.train.Int64List(value=[value]))def_bytes_feature(value):r... 查看详情

利用crnn来识别图片中的文字（一）数据预处理

参考技术A数据集中含有10072个图片文件和10072个图片所对应的包含图片中中文字内容的文本文。1.得到图片数据集中所有的中文字符，构成字符字典，字典大小为所包含不同中文字符的类别数；（dict_size=992，加上一个“空白”，... 查看详情

python图片读取常用操作方法

参考技术A批量获取图片：keras多张图片：很多情况下，你并不能使用以上这些方法来直接输入数据去训练或者预测，原因是你的数据集太大了，没办法把所有的图片都载入到内存当中。那keras的datagenerator就派上用场了，当你的模... 查看详情

h5+读取本地图片文件，转为file对象

参考技术A依次读取照片的路径，输入路径字符串，得到文件对象；全程同步顺序操作；手机图片文件详情中路径：内部存储/Pictures/IMG_1589761748105.jpg程序中获取的路径：file:///storage/emulated/0/Pictures/IMG_1589761748105.jpgclassimgFileToFileObjc... 查看详情