javascript – 使用Cordova Camera Plugin选择图像绘制画布

2023年2月4日 208次阅读

我从设备获取图像并使用Pixi JS绘制带过滤器的画布.它可以很好地利用计算机来获取图像.但是,当我在
IOS上时,它会抛出错误,例如交叉原点问题,或者我正在尝试使用未知格式.

这是我用来绘制图像的代码(适用于web /桌面但不适用于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？

最佳答案 查看关于
Cordova Whitelist Plugin的这篇文章,它解决了我的大多数问题.

我不知道你是否使用任何WKWebView插件,但cordova-wkwebview-engine插件支持一些iOS特定的应用程序传输安全设置以及
https://github.com/apache/cordova-plugin-wkwebview-engine.

另一种解决方法是使用HTML输入标记来启动摄像头捕获：

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

只需听听“改变”事件.

点赞