5

I'm getting an image from device and drawing a canvas with filters using Pixi JS. It works all well using computer to get an image. But when I'm on IOS, it throws errors such as cross origin issue, or that I'm trying to use an unknown format.

This is the code I'm using to draw the image (that works on web/desktop but not cordova built ios app)

_renderImage() {
    let wWidth;
    if (window.outerWidth > 414) {
      wWidth = 414;
    } else {
      wWidth = window.outerWidth;
    }

    const img = new Image();
    img.src = this.state.avatarSource;

    let lower;
    if (img.width > img.height) {
      lower = img.height;
    } else {
      lower = img.width;
    }

    const canvas = this.refs.canvasimg;
    if (canvas.hasChildNodes()) {
      canvas.removeChild(canvas.childNodes[0]);
    }

    const renderer = PIXI.autoDetectRenderer(wWidth, wWidth * 1.25, {transparent: true});
    const stage = new PIXI.Container();

    canvas.appendChild(renderer.view);

    // create a PIXI sprite from an image path
    const canvasImg = PIXI.Sprite.fromImage(this.state.avatarSource);
    canvasImg.anchor.x = 0;
    canvasImg.anchor.y = 0;
    canvasImg.width = wWidth;
    canvasImg.height = wWidth * 1.25;

    const filter = this._getImageFilter();

    stage.filters = [filter];
    stage.addChild(canvasImg);

    render();

    function render(){
      requestAnimationFrame(render);
      renderer.render(stage);
    }
  }

And this is the code I use to pick the image using cordova camera plugin:

_getPhoto(isPhotosLib) {
    const captureSuccess = (imageData) => {
      this.m.setState({
        // avatarSource: `data:image/jpeg;base64,${imageData}`
        avatarSource: imageData
      })
    };

    const captureError = (error) => {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
    };

    let options = {
      quality: 100,
      targetWidth: 640,
      targetHeight: 640,
      saveToPhotoAlbum: false,
      destinationType: Camera.DestinationType.FILE_URI,
      popoverOptions: new CameraPopoverOptions(640, 640, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY)
    }

    isPhotosLib ? options.sourceType = Camera.PictureSourceType.PHOTOLIBRARY : null;

    navigator.camera.getPicture(captureSuccess, captureError, options);
  }

The error I get is this:

Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin.

And on XCode:

[Generic] Creating an image format with an unknown type is an error

And when I changed to NATIVE_URI, it logs this error:

Failed to load resource: unsupported URL
assets-library://asset/asset.JPG?id=2DDAD0CF-2F82-40A0-B84B-398C996AC749&ext=JPG

So what could be the reason that it doesn't work on ios?

Carl Thomé
  • 2,703
  • 3
  • 19
  • 41
Emo
  • 580
  • 1
  • 8
  • 27

2 Answers2

1

Check out this post regarding the Cordova Whitelist Plugin, it has solved most of my issues.
I don't know whether or not you are using any WKWebView plugins, but the cordova-wkwebview-engine plugin supports some iOS specific Application Transport Security settings as well https://github.com/apache/cordova-plugin-wkwebview-engine.

Another workaround would be to use an HTML input tag to initiate the camera capture:

<input type="file" capture="camera" accept="image/*" />

And just listen to the "change" event.

Community
  • 1
  • 1
Eerik Kivistik
  • 176
  • 7
  • My problem is not getting the image, with regular DOM I can display the image on IOS. The problem appears with using Canvas on IOS (only). – Emo Apr 26 '17 at 08:50
  • The thing is, if you load an image from an untrusted source, you cannot access its pixel data in the canvas. So if you whitelist it with the plugin I suggested, you can access the canvas data as well. – Eerik Kivistik Apr 26 '17 at 09:04
  • I'll add a link to the description of the problem as well, it's called a "tainted canvas" https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#What_is_a_tainted_canvas – Eerik Kivistik Apr 26 '17 at 09:17
  • Thanks a lot! But I still do not know where and how to adjust. This CSP thing is super confusing and it keeps refusing to load the scripts... – Emo Apr 26 '17 at 09:29
  • Alright, I'll see if I can provide a better example later in the day. – Eerik Kivistik Apr 26 '17 at 11:15
  • Okay, so this might be worth a look, unless you are willing to set the camera DestinationType to DATA_URL. http://stackoverflow.com/a/37883692/7914498 – Eerik Kivistik Apr 27 '17 at 12:06
  • I tried this too indeed :) I also tried the DATA_URL No success though... :( – Emo Apr 29 '17 at 19:21
1

on the option section, set as DATA_URL :

destinationType: Camera.DestinationType.DATA_URL

this will get image as base64 format, to display the image, add

<img src="data:image/jpeg;base64,'+ imageData +'">

then the canvas draw from this img tag

dhir
  • 296
  • 3
  • 6