將圖像 URI 轉換為文件或 Blob

Question

我可以使用 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 轉換為文件？

Answer 1

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;
}

Answer 2

您需要使用 AJAX 從目錄中獲取文件。 我使用 AngularJS，下面是我用來獲取 Blob 的內容。 您幾乎可以將其轉換為您正在使用的任何 JS 框架/庫。

AngularJS 方法：

$http.get(file_uri, {'responseType':'blob'}).then(successMethod, failMethod);

Answer 3

我可以使用 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 轉換為文件？