html5中怎样将图片的绝对路径转换成文件工具
|
副问题[/!--empirenews.page--]
将图片的绝对路径转换成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: 1457946612000 lastModifiedDate: Mon Mar 14 2016 17:10:12 GMT+0800 (CST) {} name: "test.html" size: 796 type: "text/html" webkitRelativePath: "" */ /* 假如上传的是一张图片的话，会返回如下信息的 File { lastModified: 1466907500000 lastModifiedDate: Sun Jun 26 2016 10:18:20 GMT+0800 (CST) {} name: "a.jpg" size: 23684 type: "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> （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
