gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:25:53 24 4
gpt4 key购买 nike

我正在从设备获取图像并使用 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 上不起作用的原因可能是什么?

最佳答案

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

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

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

然后只听“改变”事件。

关于javascript - 使用 Cordova Camera Plugin 选取的图像绘制 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43493390/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com