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

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

作者: 彩云飘过 | 来源:发表于2020-05-26 18:23 被阅读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的使用;

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/lrbvahtx.html