c 图片转换成html文件,html5将图片的绝对路径转换成文件对象

写在前面：纯属根据某位大神的博客复制粘贴，因为工作需要用到这个，抄完就顺便不要脸的抄袭了，其实只是想记录一下，以便以后还能用到。 原文：https://blog.csdn.net/weixin_33957648/article/details/86251969

基本知识点 1. 理解HTML5中的FileList对象与file对象。

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

filesystem:URL

选择：

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/*" 即可；我们可以如下写代码：

*/

}

}

2. 理解Blob对象

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

请看如下代码：

filesystem:URL

选择文件：

文件字节长度:

文件类型：

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);

}

注意：Blob和File是可以同时使用的，可以使用FileReader从Blob中读取数据。 **下面是一段绝对路径的图片地址转换为base64编码的图片，然后将base64编码的图片转换成blob对象。**代码如下：

将以base64的图片url数据转换为Blob

/**

* 将以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"}

*/

}

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

因此我们可以使用绝对地址的图片转换成file文件对象，开发人员给我的只有图片的绝对地址，所以就一直想通过图片的绝对地址如何转换成file对象，如果不转成file对象的话，使用这句代码的时候 var reader = new FileReader(); 会报错，因此可以使用我们上面讲的blob对象先转换成blob对象，然后就可以使用文件操作对象 fileReader。