Drawing a canvas with an image selected using the Cordova Camera Plugin

Question

I get the image from the device and draw a filter canvas using Pixi JS. It works great with a computer to get an image. But when I am on iOS, it throws errors, such as a problem with cross origin, or that I am trying to use an unknown format.

This is the code I use to draw an image (which works on a website, but not on a cord built in an 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 that I use to select an image using the 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 am getting 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

And what could be the reason that it does not work on ios?

Answer 1

Whitelist Cordova, .
, - WKWebView-, cordova-wkwebview-engine iOS , https://github.com/apache/cordova-plugin-wkwebview-engine.

HTML :

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

"change".