为什么我无法在数组 ionic 3 中获得完整的 base64 字符串？答案

【问题标题】：why i can't get full base64 string inside array ionic 3?为什么我无法在数组 ionic 3 中获得完整的 base64 字符串？
【发布时间】：2018-07-31 14:34:02
【问题描述】：

我想在 ionic 3 的 for 循环中同时转换多个图像

我的代码是：

   for (let i in serviceData) {
    // for(let i=0; i< this.adviceArray.length; i++) {
      console.log("online advices", serviceData[i]);
      this.texto = serviceData[i].texto;
      console.log("check online this.texto ", this.texto );
      this.imagen = serviceData[i].imagen;
      console.log("check online this.imagen", this.imagen);

      this.convertToDataURLviaCanvas(serviceData[i].imagen, "image/jpeg").then(base64 => {
        console.log("online base64", base64);
        this.base64Image = base64;
        console.log("online this.base64Image", this.base64Image);
        // this.adviceArrays64.push({'texto': this.texto, 'imagen': this.base64Image});
      });
      console.log("outer online this.base64Image", this.base64Image);
      this.adviceArrays64.push({'texto': this.texto, 'imagen': this.base64Image});
      console.log("online this.adviceArrays64", this.adviceArrays64);
      this.storage.set("travelTips64", this.adviceArrays64);
    }

但没有获得所有图像的完整 base64 字符串。

如何在数组内转换 base64 字符串中的图像 url 并在离线模式 ionic 3 中显示所有转换后的图像？

请尽快给我解决方案。

【问题讨论】：

抱歉，您的代码没有提供任何关于为什么这不起作用的线索；/您可以分享您的完整代码吗？特别是你在这个方法中做了什么：this.convertToDataURLviaCanvas
谢谢，这个问题解决了

标签： typescript base64 ionic3

【解决方案1】：

使用以下函数解决了上述问题，

convertToDataURLviaCanvas(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 = 1000;
        canvas.width = 1000;
        ctx.drawImage(img, 0, 0);

        dataURL = canvas.toDataURL();
        //callback(dataURL);
        canvas = null;
        resolve(dataURL);
    };
    img.src = url;
});

}

当您想从数组转换图像时，请在数组中调用该函数，如下所示：

let base64Image;
for (let i in serviceData) {
 this.imagen = serviceData[i].imagen;
 this.convertToDataURLviaCanvas(this.imagen, "image/jpeg").then(base64 => {
  base64Image = base64;
  this.texto = serviceData[i].texto;
  this.adviceArrays64.push({'texto': this.texto, 'imagen': base64Image});
   this.storage.set("travelTips64Image", this.adviceArrays64);
  });
}

【讨论】：