h5+ 读取本地图片文件,转为file对象

2020-05-26  本文已影响0人  彩云飘过

h5+ 读取本地图片文件,转为file对象

使用场景

依次读取照片的路径,输入路径字符串,得到文件对象;全程同步顺序操作;
手机图片文件详情中路径:内部存储/Pictures/IMG_1589761748105.jpg
程序中获取的路径:file:///storage/emulated/0/Pictures/IMG_1589761748105.jpg

代码片段

  1. 依次处理图片文件,同步操作
    
    

class imgFileToFileObj{
constructor(){

}
//利用H5的IO方法 参考 官网地址 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 ) {                                
            // 可通过entry对象操作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编码格式转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对象
 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,图片文件转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. 同步操作,调用函数

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(' 我应该是最后的最后 fileArray = '+fileArrayOne)
})()
}


## 涉及技术点:
1. async/await   可以嵌套使用;
2. H5+ API的使用;
上一篇下一篇

猜你喜欢

热点阅读