Question

我能够使用离子Image Picker plugin获取图像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

您需要使用AJAX从目录中获取文件。我使用AngularJS，下面是我用来获取Blob的内容。您几乎可以将其转换为您正在使用的任何JS框架/库。

AngularJS方法：

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

Answer 2

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

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 3

我们必须为atob（b64Image）添加以下代码。这是我必须用getBlob（）方法编写的代码：

b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
  // Regular expression to check formal correctness of base64 encoded strings
  b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/;

  atob(string) {
    console.log('atob function called !@!@!');
    // atob can work with strings with whitespaces, even inside the encoded part,
    // but only \t, \n, \f, \r and ' ', which can be stripped.
    string = String(string).replace(/[\t\n\f\r ]+/g, "");
    if (!this.b64re.test(string))
      throw new TypeError("Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.");

    // Adding the padding if missing, for semplicity
    string += "==".slice(2 - (string.length & 3));
    var bitmap, result = "",
      r1, r2, i = 0;
    for (; i < string.length;) {
      bitmap = this.b64.indexOf(string.charAt(i++)) << 18 | this.b64.indexOf(string.charAt(i++)) << 12 |
        (r1 = this.b64.indexOf(string.charAt(i++))) << 6 | (r2 = this.b64.indexOf(string.charAt(i++)));

      result += r1 === 64 ? String.fromCharCode(bitmap >> 16 & 255) :
        r2 === 64 ? String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255) :
          String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255, bitmap & 255);
    }
    return result;
  }

将图像URI转换为文件或Blob [ionic]

3 个答案: