Base64 toDataURL on iOS 10.3.1 using Ionic 2. Not working


#1

Hi,

canvas.toDataURL("image/jpg") is working when I’m using an image that is local.

Like this this.originalImage = 'assets/img/defaultImage-900.jpg';

When I change it to a picture from the camera its not working.

Like this this.originalImage = "data:image/jpeg;base64," + imageData;

This worked before I updated to iOS 10.3.1…
How do i fix?

What I want do to is to merge two images (900x900) on top of each other, to one image.

  save() {
    //get filter index
    this.selectedFilter = this.slides.getActiveIndex();

    // run the canvas thing
    this.applyFilter(this.filters[this.selectedFilter]).subscribe(() => {
      //done
    });
    }

Apply the filter on this.originalImage(base64 image from the camera)


    applyFilter(filterUrl: string) {
      return Observable.create((observer: any) => {

      let baseImg = new Image();
      let filterImg = new Image();

      let canvas = document.createElement('canvas');
      var ctx = canvas.getContext("2d");

      baseImg.src = this.originalImage;

      baseImg.onload = () => {
        canvas.width = baseImg.width;
        canvas.height = baseImg.height;
        ctx.drawImage(baseImg, 0, 0);

        filterImg.src = filterUrl;

        filterImg.onload = () => {
          let hRatio = canvas.width / filterImg.width;
          let vRatio = canvas.height / filterImg.height;
          let ratio = Math.max(hRatio, vRatio);
          let centerShift_x = (canvas.width - filterImg.width * ratio) / 2;
          let centerShift_y = (canvas.height - filterImg.height * ratio) / 2;
          ctx.drawImage(filterImg, 0, 0, filterImg.width, filterImg.height, centerShift_x, centerShift_y, filterImg.width * ratio, filterImg.height * ratio);

          this.resultImage = canvas.toDataURL("image/jpg");

          observer.next();
        }
      };

    });

    }

Camera settings


        // set options
        let options = { 
            quality : 30,
            destinationType : Camera.DestinationType.DATA_URL,
            sourceType : 1,
            allowEdit : true,
            encodingType: Camera.EncodingType.JPEG,
            cameraDirection: Camera.Direction.FRONT,
            correctOrientation: true,
            saveToPhotoAlbum: false,
            targetHeight: 900,
            targetWidth: 900
        };
        

          Camera.getPicture(options).then((imageData) => {
              this.zone.run(() => {
                  this.originalImage = "data:image/jpeg;base64," + imageData;
              });
          }, (err) => {
              if(this.originalImage == null || undefined){
                this.navCtrl.setRoot(SocialTabsPage, { tabIndex: 0 });
              }
          });

#2

Hi ,
I’m also facing same issue in ionic1.x ios 10.3 safari browser…


#3

Are you both getting this in connection with usage of a Cordova plugin? If so, you should check the Github issues for that plugin if someone mentioned the problem yet.

You also googled for problems related to iOS 10.3.1 and Base64 toDataURL already, right?


#4

Hi Sujan,

Using image compression library JIC.js . Posted issue over there , Please go-through the below link.


#5

Hi!
I found an solution for this: read my answer at

:slight_smile: