如何使用从 Phonegap 应用程序运行的画布启用 CORS？答案

【问题标题】：How to enable CORS using canvas running from a Phonegap application?如何使用从 Phonegap 应用程序运行的画布启用 CORS？
【发布时间】：2021-03-06 04:17:59
【问题描述】：

我正在使用 KineticJS 将图像添加到画布元素，当添加任何图像时，由于 CORS 安全问题，我无法获取渲染画布的 dataUrl。

我在 StackOverflow 上找到的修复建议在“服务器”上传递一个 allow-access-origin 标头，但由于这是在 iPad 上运行的本地应用程序，因此没有服务器，因此它被认为是本地的。

是否有启用 dataUrl 功能的解决方法，以便我可以在 iPad 上本地运行时保存“受污染”的画布？

我用来抓取网址的代码如下：

$(document).on("tap", "#share-menu-button", function() {
    stage.toDataURL({
        callback:function(dataUrl) {
            alert(dataUrl);
        }
    });
});

【问题讨论】：

如果本地在这里意味着 file:// 它仍然被认为是不同的来源，并且您至少需要一个本地服务器来提供页面和图像。
如果是本地的，是否也可以从file://加载包含canvas元素的页面？不确定这是否可行，但它可能......例如创建一个<iframe>，其中src 指向file://some/path/somefile.html。

标签： javascript html cordova canvas

【解决方案1】：

我试图在 Cordova 的 iOS 上使用“file:///”方案对图像执行 canvas.toDataURL，并遇到各种错误，包括：“Access-Control-Allow-Origin 不允许 Origin null。”

对我有用的解决方案涉及两个步骤：

添加到 config.xml 的部分：

如此处所述： https://cordova.apache.org/announcements/2020/06/01/cordova-ios-release-6.0.0.html

将 navigator.camera.getPicture() 的 Success 回调中返回的文件名从“file:///”方案更新为新的“app://”方案，使用：

imageFileName = window.WkWebView.convertFilePath(imageFileName)

作为（某种）记录在这里： https://github.com/apache/cordova-plugin-camera/issues/622#issuecomment-659357799

【讨论】：