html5中将图片的绝对路径转换成文件对象

将图片的绝对路径转换成base64编码，请看这篇文章

我们先来理解基本知识点：

1. 理解HTML5中的FileList对象与file对象。

在HTML5中，FileList对象表示用户选择的文件列表。通过添加multipe属性，file控件内允许一次选择多个文件。控件内的每一个用户选择的文件都是一个
file对象，而FileList对象则是file对象的列表。代表用户选择的所有文件。我们先来看一个简单的demo，看下file文件对象有哪些属性。如下代码：

<!DOCTYPE html>
<html><head><title>filesystem:URL</title></head><body><div><label>选择：</label><input type='file' multiple id="file" /><input type="button" value="文件上传" onClick="showFile()" /></div><script>function showFile() {var files = document.getElementById('file').files;  // 返回所有被选择的文件for (var i = 0, ilen = files.length; i < ilen; i++) {// 打印出单个文件对象的信息
          console.log(files[i]);/*  * 打印的信息如下：File {lastModified: 1457946612000lastModifiedDate: Mon Mar 14 2016 17:10:12 GMT+0800 (CST) {}name: "test.html"size: 796type: "text/html"webkitRelativePath: "" *//*  如果上传的是一张图片的话，会返回如下信息的File {lastModified: 1466907500000lastModifiedDate: Sun Jun 26 2016 10:18:20 GMT+0800 (CST) {}name: "a.jpg"size: 23684type: "image/jpeg"webkitRelativePath: ""}*//*因此 如果需要判断该上传的文件是不是图像文件的话，可以根据type类型来判断如下：var file = files[i];if (!/image\/\w+/.test(file.type)) {console.log('该文件不是图像文件');} else {console.log('该文件是图像文件');}但是如果只让传图片的话，可以在image控件添加一个属性 accept="image/*" 即可；我们可以如下写代码：<input type='file' multiple accept = 'image/gif,image/jpeg,image/jpg,image/png' />*/}}</script></body>
</html>

2. 理解Blob对象

要点：在HTML5中，新增一个Blob对象，代表原始二进制数据，其实file对象也是继承了Blob对象。
Blob对象有两个属性，size属性表示一个Blob对象的字节长度，type属性表示Blob的MIME类型，如果是未知类型，则返回一个空字符串。

请看如下代码：

<!DOCTYPE html>
<html><head><title>filesystem:URL</title></head><body><div><label>选择文件：</label><input type="file" id="file" /><input type="button" value="显示文件信息" onClick="showFileType()" /><p>文件字节长度: <span id="size"></span></p><p>文件类型：<span id="type"></span></p></div><script>function showFileType() {var file;// 获取用户选择的第一个文件
        file = document.getElementById('file').files[0];var size = document.getElementById('size');var type = document.getElementById('type');// 显示文件字节的长度
        size.innerHTML = file.size;// 显示文件的类型
        type.innerHTML = file.type;// 打开控制台 查看返回的file对象
        console.log(file);}</script></body>
</html>

注意：Blob和File是可以同时使用的，可以使用FileReader从Blob中读取数据。

下面是一段绝对路径的图片地址转换为base64编码的图片，然后将base64编码的图片转换成blob对象。代码如下：

<!DOCTYPE html>
<html><head><title>将以base64的图片url数据转换为Blob</title></head><body><script>/**  * 将以base64的图片url数据转换为Blob  * @param urlData  * 用url方式表示的base64图片数据  */  function convertBase64UrlToBlob(base64){ var urlData =  base64.dataURL;var type = base64.type;var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte//处理异常,将ascii码小于0的转换为大于0  var ab = new ArrayBuffer(bytes.length);  var ia = new Uint8Array(ab);  for (var i = 0; i < bytes.length; i++) {  ia[i] = bytes.charCodeAt(i);  }  return new Blob( [ab] , {type : type});  }/* * 图片的绝对路径地址 转换成base64编码 如下代码： */function getBase64Image(img) {var canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, img.width, img.height);var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();var dataURL = canvas.toDataURL("image/"+ext);return {dataURL: dataURL,type: "image/"+ext};}var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";var image = new Image();image.crossOrigin = '';image.src = img;image.onload = function(){var base64 = getBase64Image(image);console.log(base64);/*打印信息如下：{dataURL: "data:image/png;base64,xxx"type: "image/jpg"}*/var img2 = convertBase64UrlToBlob(base64);console.log(img2);/*打印信息如下：Blob {size: 9585, type: "image/jpg"}*/} </script></body>
</html>

注意：在HTML5中，新增一个Blob对象，代表原始二进制数据，其实file对象也是继承了Blob对象。因此我们可以使用图片的绝对地址转换成文件对象。

因此我们可以使用绝对地址的图片转换成file文件对象，详细的demo可以看我git上图片上传控件，该插件先是图片上传支持，然后突然发现到编辑页面的时候，需要显示默认的图片，也可以同时支持在默认显示图片的情况下继续上传新图片，或者删除所有的图片，但是开发人员给我的只有图片的绝对地址，所以就一直想通过图片的绝对地址如何转换成file对象，如果不转成file对象的话，使用这句代码的时候 var reader = new FileReader(); 会报错，因此可以使用我们上面
讲的blob对象先转换成blob对象，然后就可以使用文件操作对象 fileReader。

详细的代码，请看我git上的图片上传控件(https://github.com/tugenhua0707/html5UploadImage)
, 效果查看 https://tugenhua0707.github.io/html5UploadImage/index.html

html5中将图片的绝对路径转换成文件对象相关推荐

H5中将图片的绝对路径转换成文件对象
一.file对象在HTML5中,FileList对象表示用户选择的文件列表. 通过添加multipe属性,file控件内允许一次选择多个文件.控件内的每一个用户选择的文件都是一个file对象,而Fi ...
HTML5+jSignature插件手写签名生成图片并转换成文件流实现功能
公司需求html5手写签名,并转换成图片上传服务器项目结构:jquery+springboot项目需要引入js文件:jquery的jquery.min.js .jSignature插件的 jSign ...
Java中windows路径转换成linux路径等工具类
项目中发现别人写好的操作系统相关的工具类: 我总结的类似相关博客:http://www.cnblogs.com/DreamDrive/p/4289860.html 1 import java.net. ...
Android app本地图片转换成Drawable对象的方法
app开发中把app的res下drawable的图片转换成drawable对象也是常有的功能下面就记录下两种转换的方法第一种方法借助ContextCompat 转换方法 Drawable d ...
如何把图片上的文字转换成word？
有的图片上是有文字的,我们可以将图片上的文字转换成Word文档,那么我们是怎么进行在线转换的?下面小编简单给大家介绍一下. 步骤一:我们可以将这些带有文字的图片放在桌面上,将这些需要转换的图片进行保存 ...
图片上的文字转换成word-捷速OCR文字识别
图片上的文字转换成word-捷速OCR文字识别这几天公司需要我将一片旅游书籍上的几篇关于旅游的文章进行编辑,做一个相关方面的专题,这可就烦到我了,专题方面的设计对我来说并不难,难的就是我必须把那几篇 ...
如何把图片上面的文字转换成word-OCR文字识别软件
解析如何把图片上面的文字转换成word 有没有小伙伴们为百度文库里面的资源下载需要下载券感到坑爹,特别是现下下载资源紧缺,各个网站配合网打的行动,导致很多优秀网站现在没法下载资源,尤其是新浪爱问共享资 ...
怎么根据css类将html转换成数组,JavaScript_js中将HTMLCollection/NodeList/伪数组转换成数组的代码，这里把符合以下条件的对象称 - phpStudy...
js中将HTMLCollection/NodeList/伪数组转换成数组的代码这里把符合以下条件的对象称为伪数组 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等 ...
如何把图片上的文字转换成文字?第二个功能更强大！
如何把图片上的文字转换成文字?说到把图片上的文字转换成文字,相信大家对于这一需求都不陌生.这一需求经常发生在我们阅读文章遇到好的选段想要摘录,或者是上级领导突然发了图片过来,让我们将里面的文字内容提取 ...

html5中将图片的绝对路径转换成文件对象

html5中将图片的绝对路径转换成文件对象相关推荐

最新文章

热门文章