时间戳

首页 > 解决方案 > 将图像 URI 转换为文件或 Blob

javascript - 将图像 URI 转换为文件或 Blob

问题描述

我可以使用 Ionic Image Picker 插件获取图像 URI ：

this.imagePicker.getPictures(options).then((results) => {
    for (var i = 0; i < results.length; i++) {
        //below logs: 'Image URI: file:///Users/josh.0/Library/Developer/CoreSimulator/Devices/CC0FFBD2-EADF-4489-8F22-7948E0EFD261/data/Containers/Data/Application/2BC3C571-61B7-4EFF-A4D1-4D1F99F04EBC/tmp/cdv_photo_013.jpg'
        console.log('Image URI: ' + results[i]);  
    }
}, (err) => { });

我需要将此图像作为文件获取，以便上传。我已尝试执行以下操作，但它不起作用：

this.imagePicker.getPictures(options).then((results) => {
    for (var i = 0; i < results.length; i++) {
       console.log('Image URI: ' + results[i]);
       let base64Image = "data:image/jpeg;base64," + results[i];
         fetch(base64Image)
            .then(res => res.blob())
            .then(blob => {
                //Doesnt fire
                console.log("Got blob")
                const file = new File([blob], "image.png")
         })
    }
}, (err) => { });

如何将图像 URI 转换为文件？

标签： javascriptcordovaionic-framework

解决方案

Ionic 确实需要改进他们的文档。文档中关于插件的文档绝对是可悲的。我花了几个小时自己解决这个问题。无论如何，这里是：

getImage() {
    const options = {
        maximumImagesCount: 1,
        width: 800,
        height: 800,
        quality: 100,
        outputType: 1 //Set output type to 1 to get base64img
    };

    this.imagePicker.getPictures(options).then((results) => {
        var files: File[] = [];
        for (var i = 0; i < results.length; i++) {
        console.log('Image URI: ' + results[i]);
        let blob = this.getBlob(results[i], ".jpg")
         const file = new File([blob], "image.jpg")
         //Do something with file like upload
       }
    }, (err) => { });
}



private getBlob(b64Data:string, contentType:string, sliceSize:number= 512) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
    let byteCharacters = atob(b64Data);
    let byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        let slice = byteCharacters.slice(offset, offset + sliceSize);

        let byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        let byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }
    let blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

推荐阅读