javascript - 使用 Cordova Camera Plugin 选取的图像绘制 Canvas

Question

我正在从设备获取图像并使用 Pixi JS 绘制带有滤镜的 Canvas 。使用计算机获取图像效果很好。但是当我在 IOS 上时，它会抛出错误，例如跨源问题，或者我正在尝试使用未知格式。

这是我用来绘制图像的代码(适用于网络/桌面但不适用于 cordova 构建的 ios 应用程序)

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

这是我使用 cordova 相机插件选择图像的代码:

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

我得到的错误是这样的:

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

在 XCode 上:

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

当我更改为 NATIVE_URI 时，它会记录此错误:

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

那么它在 ios 上不起作用的原因可能是什么？

Answer 1

查看这篇关于 Cordova Whitelist Plugin 的帖子，它解决了我的大部分问题。
我不知道您是否使用任何 WKWebView 插件，但 cordova-wkwebview-engine 插件也支持一些 iOS 特定的应用程序传输安全设置 https://github.com/apache/cordova-plugin-wkwebview-engine .

另一种解决方法是使用 HTML 输入标签来启动相机捕获:

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

然后只听“改变”事件。