Drawing canvas with an image picked with Cordova Camera Plugin

Question

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?

Answer 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.

Answer 2

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