为什么在ionic 3中无法通过convertToDataURLviaCanvas方法获取完整图像大小?

时间:2018-07-31 06:24:43

标签: html5 typescript base64 ionic3

enter image description here

我也希望离线模式下的原始图像尺寸也如图2的在线模式所示。

enter image description here

我的问题是,当我在没有互联网连接的情况下进入应用程序时,由于我使用的是convertToDataURLviaCanCan(),因此我失去了图像的全部质量和大小。

所以,请尽快在这里给出解决方案。

我的代码是:

我正在使用此功能转换所有图像:

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

getTravelAdviceData() {

 if(this.restProvider.getNetworkType() == 'none') {
  // this.onlineGrid = false;
  // this.offlineGrid = true;

  this.storage.get('companyLogoOffline').then((data) => {
    // Do something with latitude value
    // console.log("offline data", data);
    this.getcompanyLogo = data;
  });

  this.storage.get('travelTips64Image').then((data) => {
    // Do something with latitude value
    // console.log("offline data", data);
    this.adviceArray = data;
    // console.log("offline this.adviceArray", this.adviceArray);
  });

 } else {

  // this.offlineGrid = false;
  // this.onlineGrid = true;

  this.restProvider.getTravelAdvice()
  .then(data => {
    let serviceData : any =  data['consejosviaje'];

    // this.adviceArray = serviceData;
    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);

      this.adviceArray = this.adviceArrays64;
     });
    }
   });
  }
 }

0 个答案:

没有答案