h5+ 讀取本地圖片文件，轉(zhuǎn)為file對(duì)象
使用場(chǎng)景
依次讀取照片的路徑，輸入路徑字符串，得到文件對(duì)象；全程同步順序操作；
手機(jī)圖片文件詳情中路徑：內(nèi)部存儲(chǔ)/Pictures/IMG_1589761748105.jpg
程序中獲取的路徑：file:///storage/emulated/0/Pictures/IMG_1589761748105.jpg
代碼片段
- 依次處理圖片文件，同步操作
class imgFileToFileObj{
constructor(){
}
//利用H5的IO方法 參考 官網(wǎng)地址 https://www.html5plus.org/doc/zh_cn/io.html#plus.io.FileReader
getFileFromHIO(fileAllPath){
var promise=new Promise(function(resolve,reject){
plus.io.resolveLocalFileSystemURL(
fileAllPath,
function( entry ) {
// 可通過(guò)entry對(duì)象操作test.html文件
entry.file( function(file){
var fileReader = new plus.io.FileReader();
console.log("getFile:" + JSON.stringify(file));
fileReader.readAsDataURL(file);//以BASE64編碼格式讀取文件
fileReader.onloadend = function(evt) {
// console.log("evt.target" + evt.target);
// console.log("evt.target.result len = " +evt.target.result.length);
// console.log("evt.target.result = " +evt.target.result);
//base64編碼格式轉(zhuǎn)file格式
var aa = evt.target.result;
var arr = aa.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
var fileResult = new File([u8arr], "filename.jpg", { type: mime });
console.log(fileResult);
resolve(fileResult);
}
} );
},
function ( e ) {
console.log( "Resolve file URL failed: " + e.message );
reject(e)
}
);
})
return promise;
}
//利用Image對(duì)象
getCodeFromImg(fileAllPath){
var promise=new Promise(function(resolve,reject){
var imga = new Image();
imga.src=fileAllPath;
imga.onload=function(){
var canvas = document.createElement("canvas");
canvas.width = imga.width;
canvas.height = imga.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(imga, 0, 0, imga.width, imga.height);
var dataURL = canvas.toDataURL("image/png");
var arr = dataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
console.log(new File([u8arr], "mid_shot.jpg", { type: mime }));
resolve(new File([u8arr], "mid_shot.jpg", { type: mime }));
}
imga.onerror=function(){
reject('error，圖片文件轉(zhuǎn)file失敗')
}
});
return promise;
}
async doChange(imgFileStrList) {
var FileList = new Array();
for(var i=0;i<imgFileStrList.length;i++){
const time2 = await this.getFileFromHIO(imgFileStrList[i]);
//const time2 = await this.getCodeFromImg(imgFileStrList[i]);
console.log(time2);
FileList.push(time2);
}
console.log(FileList);
return FileList;
}
}
2. 同步操作，調(diào)用函數(shù)
submit: function (){
var box=new imgFileToFileObj();
var fileAllPath = 'file:///storage/emulated/0/Pictures/IMG_1589761748105.jpg';
var imgFileStrList = new Array();
imgFileStrList.push(fileAllPath);
imgFileStrList.push(fileAllPath);
imgFileStrList.push(fileAllPath);
(async () => {
var fileArrayOne= await box.doChange(imgFileStrList);
console.log(' 我應(yīng)該是最后的最后 fileArray = '+fileArrayOne)
})()
}
## 涉及技術(shù)點(diǎn)：
1. async/await 可以嵌套使用；
2. H5+ API的使用；