Question

问题：我尝试将图片选择器结果转换为 base64 格式，因为它会在图片uri中显示结果，并且不希望相机插件作为要求是选择来自图库的多个图像。

大多数问题已经询问了这个相关问题，但没有任何帮助，这里是我已经问过的问题 Link 1 Link 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;
    });
}

请帮助解决此问题

Official Link Of Ionic Image Picker

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字符串。 IT将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');
        })
}

将Cordova图像搜索器结果转换为Base64格式Ionic

2 个答案: