使用 base64 获取图像字符串

Question

我试图从（'@ionic-native/image-picker'）获取图像文件 uri 的 base64 字符串（使用'@ionic-native/base64'），但在运行此代码后，图像似乎已损坏。有什么建议吗？

我的html：

<img [src]="base64ImageChosen" *ngIf="base64ImageChosen"/>

选择器选项：

    this.pickerOptions = {
        maximumImagesCount: 1,
        width: 10,
        height: 10,
        quality: 100,
        outputType: 0
    };

我的代码：

chooseImage() {
    this.imagePicker.getPictures(this.pickerOptions).then((results) => {
        for (let i = 0; i < results.length; i++) {
            let filePath: string = results[i];

            this.base64.encodeFile(filePath)
            .then((base64File: string) => {
                this.base64ImageChosen = base64File
            }, (err) => {
                console.log(err);
            })
            .then((res) =>
                this.myForm.patchValue({ imageChosen: this.base64ImageChosen })
            )
        }
    }, (err) => { });
}

Answer 1

要显示图像，您需要使用window.URL.createObjectURL()，它将创建一个代表您的图像对象的字符串。

let image = new Image()
image.src = filePath;
base64ImageChosen = URL.createObjectURL(image);

从您的代码看来，您似乎想要显示文件夹内的所有图像。我假设您正在使用 ngFor 在您的 html 模板中循环。

Answer 2

你可以使用：

this.imagePicker.getPictures(options).then( (res)=>{ for (var i = 0; i < res.length; i++) { let base64 =data:image/jpeg;base64,+res[i]; this.images.push(base64); } })