将Cordova图像拾取器结果转换为Base64格式

Question

问题：我正在尝试将image Picker Result 转换为 base64 格式，因为它可以在Image URI中提供结果想要到摄像机插件的要求是从画廊中选择多个图像。

大多数问题都问了这个相关问题，但没有任何帮助，这是我已经遇到的问题链接1链接2

在这里我尝试将图像转换为base64

getImageFromGallery() {
    let options = {
        maximumImagesCount: 3,
        width: 800,
        height: 800,
        quality: 50,
        outputType: 0//image uri 
    };
    this.imagepicker.getPictures(options).then((results) => {
        for (var i = 0; i < results.length; i++) {
            this.imageurlfrompicker = results[i];
            let resizeoptions = {
                uri: results[i],
                quality: 50,
                width: 800,
                height: 800
            } as ImageResizerOptions;
            this.imageResizer
                .resize(resizeoptions)
                .then((filePath: string) => {
                    this.imageurlfromresizer = filePath;
                    this.convertToBase64(filePath, 'image/png').then(
                        data => {
                            this.imagebase64 = data.toString(); //base64 of image
                            console.log(data.toString());
                            //this.base64Image = "data:image/jpeg;base64," + imageData; // old one
                            this.imagelist.push(this.imagebase64);
                            this.imagelist.reverse();

                        }
                    );
                })
                .catch(e => console.log(e));
        }
    }, (err) => { });
}

代码转换为base64

convertToBase64(url, outputFormat) {
    return new Promise((resolve, reject) => {
        let img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onload = function () {
            let canvas = <HTMLCanvasElement>document.createElement('CANVAS'),
                ctx = canvas.getContext('2d'),
                dataURL;
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0);
            dataURL = canvas.toDataURL(outputFormat);
            canvas = null;
            resolve(dataURL);
        };
        img.src = url;
    });
}

请帮助解决此问题

离子图像拾取器的官方链接

Answer 1

您可以使用HTML 5 Canvas API，因为它可能希望它能对您有所帮助

  function encodeImageUri(imageUri)
{
  var c=document.createElement('canvas');
   var ctx=c.getContext("2d");
   var img=new Image();
    img.onload = function(){
     c.width=this.width;
     c.height=this.height;
     ctx.drawImage(img, 0,0);
    };
   img.src=imageUri;
    var dataURL = c.toDataURL("image/jpeg");
    return dataURL;
}

Answer 2

此插件肯定会帮助 https://ionicframework.com/docs/native/base64/

我在项目中使用了它，以掩盖从ImagePicker(画廊和相机(到base64字符串的数据。它需要URI到参数并使用base64返回Promise。我的应用程序中有类似的示例：

saveUserImageFromGallery(): any {
            return this.imagePicker.getPictures(this.imagePickerOptions)
                .then((results) => {
                    return this.resizeAndSave(results[0]);
                }, () => {
                    console.log('Error picking image');
                });
    }

使用base64插件

    resizeAndSave(imageUri) {
            return this.cropService.crop(imageUri).then((croppedUri) => {
                    return this.imageResizer
                        .resize({
                            folderName: 'image',
                            uri: croppedUri,
                            quality: 75,
                            width: 300,
                            height: 300,
                            fileName: Date.now() + '.jpg'
                        })
                        .then((filePath: string) => {
                            return this.base64.encodeFile(filePath)
                                .then(base64File => {
                                    console.log('here is base64 string: ', base64File)
                                    return base64File;
                                })
                        })
                        .catch(() => {
                            console.log('Error resizing image');
                        });
                },
                () => {
                     console.log('Error cropping image');
                })
        }

使用文件插件

resizeAndSave(imageUri) {
      return this.cropService.crop(imageUri).then((croppedUri) => {
            return this.imageResizer
                .resize({
                    folderName: 'image',
                    uri: croppedUri,
                    quality: 75,
                    width: 300,
                    height: 300,
                    fileName: Date.now() + '.jpg'
                })
                .then((filePath: string) => {
                    let fileName = filePath.split('/').pop();
                    let path = filePath.substring(0, filePath.lastIndexOf("/") + 1);
                    return this.file.readAsDataURL(path, fileName)
                        .then(base64File => {
                            this.sendUserImage(base64File).subscribe(() => {
                                    console.log("Image saved");
                                },
                                (err) => {
                                    console.log('Error saving image');
                                });
                            return base64File;
                        })
                        .catch(() => {
                            console.log('Error reading file from');
                        })
                })
                .catch(() => {
                    console.log('Error resizing image');
                });
        },
        () => {
            console.log('Error cropping image');
        })
}