输出需要Base64格式使用科尔多瓦图像调整器

-1

我使用离子2，我需要图像调整大小。因为我用这个插件输出需要Base64格式使用科尔多瓦图像调整器

离子科尔多瓦插件添加https://github.com/protonet/cordova-plugin-image-resizer.git

npm install --save @ionic-native/image-resizer

这里是我的代码。

import { NavController, AlertController } from 'ionic-angular'; 
import { ImagePicker } from '@ionic-native/image-picker'; 
import { Camera } from 'ionic-native'; 
import { ImageResizer, ImageResizerOptions } from '@ionic-native/image-resizer'; 
declare var window: any; 

constructor(public alertCtrl: AlertController,private imageResizer: ImageResizer,public platform: Platform,private imagePicker: ImagePicker) { 
} 

    Choosephoto() 
    { 
    const options = { 
     maximumImagesCount: 3, // Android only since plugin version 2.1.1, default no limit 
     quality: 90, // 0-100, default 100 which is highest quality 
     width: 400, // proportionally rescale image to this width, default no rescale 
     height: 400, // same for height 
     destinationType: Camera.DestinationType.DATA_URL, 
     sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
     encodingType: Camera.EncodingType.JPEG,  
     correctOrientation: true, 
     outputType: 1 // default .FILE_URI 
    } 
    this.imagePicker.getPictures(options).then((results) => { 
     var arr = []; 

      for (var i = 0; i < results.length; i++) { 

      this.base64Image = "data:image/jpeg;base64," + results[i]; 
      //console.log("Image URL",this.base64Image); 

      if(this.images.length == 0) 
      { 
       arr.push({ 
       file:this.base64Image 
      }) 
      this.images=arr; 
      } 
      else if(this.images.length != 0) 
      { 
       this.images.push({ 
       "file":this.base64Image 
      }) 
      } 

      let options1 = { 
      uri: this.base64Image, 
      quality: 90, 
      width: 100, 
      height: 100, 
      outputType:"" 
      } as ImageResizerOptions; 


      this.imageResizer 
      .resize(options1) 
      .then((filePath: any) => { 
       var image=new Image(); 
       image.src=filePath; 
       var path=image.src; 
       console.log("called function"); 
       this.convertToDataURLviaCanvas(filePath, 'image/png').then(
       data => { 
        console.log(data); 
        let alert = this.alertCtrl.create({ 
        title: data.toString(), 
        buttons: ['Dismiss'] 
        }); 
        alert.present(); 
       } 
      ); 
       console.log('FilePath', filePath) 

      }) 
      .catch(e => console.log("Failedresizeerr",e)); 

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

    }

它工作得很好，结果是Filepath。但我需要base64string格式。

我该怎么做。

我不知道。

谢谢。

来源

2017-05-22 ANISUNDAR

纠正我，如果我错了，你只需要的base64字符串，没有文件要存储在设备中？ –

谢谢你的回复。我不明白，你说了些什么？ – ANISUNDAR

我的意思是，你需要base64字符串，但是这个插件仅返回存储文件的URL。所以你有两个选择，修改该插件中的java代码以返回base64字符串，或者可以将图像文件url转换为前端的base64。即。 Typescript/javascript –

好的，我所做的与您的方法类似，使用图像选择器插件，通过此插件加载图像，使用图像大小调整插件调整大小，并显示Base64字符串。

下面是代码：

getImage() { 
    let options = { 
     maximumImagesCount: 3, 
     width: 400, 
     height: 400, 
     quality: 90, 
     outputType: 0 
    }; 
    this.imagePicker.getPictures(options).then((results) => { 
     for (var i = 0; i < results.length; i++) { 
     this.imageurlfrompicker = results[i]; 
     let resizeoptions = { 
      uri: results[i], 
      folderName: 'demofolder', 
      quality: 90, 
      width: 1280, 
      height: 1280 
     } as ImageResizerOptions; 
     this.imageResizer 
      .resize(resizeoptions) 
      .then((filePath: string) => { 
      this.imageurlfromresizer = filePath; 
      this.convertToBase64(filePath, 'image/png').then(
       data => { 
       this.imagebase64 = data.toString(); 
       } 
      ); 
      }) 
      .catch(e => console.log(e)); 
     } 
    }, (err) => { }); 
    } 

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

截图：