溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)html5中怎么將圖片的絕對(duì)路徑轉(zhuǎn)換成文件對(duì)象，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
具體如下：
我們先來理解基本知識(shí)點(diǎn)：
1. 理解HTML5中的FileList對(duì)象與file對(duì)象。
在HTML5中，F(xiàn)ileList對(duì)象表示用戶選擇的文件列表。通過添加multipe屬性，file控件內(nèi)允許一次選擇多個(gè)文件。控件內(nèi)的每一個(gè)用戶選擇的文件都是一個(gè)file對(duì)象，而FileList對(duì)象則是file對(duì)象的列表。代表用戶選擇的所有文件。我們先來看一個(gè)簡單的demo，看下file文件對(duì)象有哪些屬性。如下代碼：
<!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++) {
// 打印出單個(gè)文件對(duì)象的信息
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: ""
*/
/* 如果上傳的是一張圖片的話，會(huì)返回如下信息的
File {
lastModified: 1466907500000
lastModifiedDate: Sun Jun 26 2016 10:18:20 GMT+0800 (CST) {}
name: "a.jpg"
size: 23684
type: "image/jpeg"
webkitRelativePath: ""
}
*/
/*
因此 如果需要判斷該上傳的文件是不是圖像文件的話，可以根據(jù)type類型來判斷如下：
var file = files[i];
if (!/image\/\w+/.test(file.type)) {
console.log('該文件不是圖像文件');
} else {
console.log('該文件是圖像文件');
}
但是如果只讓傳圖片的話，可以在image控件添加一個(gè)屬性 accept="image/*" 即可；我們可以如下寫代碼：
<input type='file' multiple accept = 'image/gif,image/jpeg,image/jpg,image/png' />
*/
}
}
</script>
</body>
</html>2. 理解Blob對(duì)象
要點(diǎn)：在HTML5中，新增一個(gè)Blob對(duì)象，代表原始二進(jìn)制數(shù)據(jù)，其實(shí)file對(duì)象也是繼承了Blob對(duì)象。
Blob對(duì)象有兩個(gè)屬性，size屬性表示一個(gè)Blob對(duì)象的字節(jié)長度，type屬性表示Blob的MIME類型，如果是未知類型，則返回一個(gè)空字符串。
請(qǐng)看如下代碼：
<!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>文件字節(jié)長度: <span id="size"></span></p>
<p>文件類型：<span id="type"></span></p>
</div>
<script>
function showFileType() {
var file;
// 獲取用戶選擇的第一個(gè)文件
file = document.getElementById('file').files[0];
var size = document.getElementById('size');
var type = document.getElementById('type');
// 顯示文件字節(jié)的長度
size.innerHTML = file.size;
// 顯示文件的類型
type.innerHTML = file.type;
// 打開控制臺(tái) 查看返回的file對(duì)象
console.log(file);
}
</script>
</body>
</html>注意：Blob和File是可以同時(shí)使用的，可以使用FileReader從Blob中讀取數(shù)據(jù)。
下面是一段絕對(duì)路徑的圖片地址轉(zhuǎn)換為base64編碼的圖片，然后將base64編碼的圖片轉(zhuǎn)換成blob對(duì)象。代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>將以base64的圖片url數(shù)據(jù)轉(zhuǎn)換為Blob</title>
</head>
<body>
<script>
/**
* 將以base64的圖片url數(shù)據(jù)轉(zhuǎn)換為Blob
* @param urlData
* 用url方式表示的base64圖片數(shù)據(jù)
*/
function convertBase64UrlToBlob(base64){
var urlData = base64.dataURL;
var type = base64.type;
var bytes = window.atob(urlData.split(',')[1]); //去掉url的頭，并轉(zhuǎn)換為byte
//處理異常,將ascii碼小于0的轉(zhuǎn)換為大于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});
}
/*
* 圖片的絕對(duì)路徑地址 轉(zhuǎn)換成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://cache.yisu.com/upload/information/20210312/296/133946.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中，新增一個(gè)Blob對(duì)象，代表原始二進(jìn)制數(shù)據(jù)，其實(shí)file對(duì)象也是繼承了Blob對(duì)象。因此我們可以使用圖片的絕對(duì)地址轉(zhuǎn)換成文件對(duì)象。
因此我們可以使用絕對(duì)地址的圖片轉(zhuǎn)換成file文件對(duì)象，詳細(xì)的demo可以看我git上圖片上傳控件，該插件先是圖片上傳支持，然后突然發(fā)現(xiàn)到編輯頁面的時(shí)候，需要顯示默認(rèn)的圖片，也可以同時(shí)支持在默認(rèn)顯示圖片的情況下繼續(xù)上傳新圖片，或者刪除所有的圖片，但是開發(fā)人員給我的只有圖片的絕對(duì)地址，所以就一直想通過圖片的絕對(duì)地址如何轉(zhuǎn)換成file對(duì)象，如果不轉(zhuǎn)成file對(duì)象的話，使用這句代碼的時(shí)候 var reader = new FileReader(); 會(huì)報(bào)錯(cuò)，因此可以使用我們上面講的blob對(duì)象先轉(zhuǎn)換成blob對(duì)象，然后就可以使用文件操作對(duì)象 fileReader。
關(guān)于“html5中怎么將圖片的絕對(duì)路徑轉(zhuǎn)換成文件對(duì)象”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼