如何将图像加载到 canvas 而没有离子 iOS 混合应用程序的 CORS 问题

Question

我想将图像加载到用于显示自定义 google 地图标记的 canvas 中。以下代码适用于浏览器和 Android 但不适用于 iOS，因为 WKWebView 不接受针对此事的 CORS 请求。

let ctx = canvas.getContext('2d');
let img = new Image();
img.crossOrigin = "anonymous";
img.src = url;

img.onload = function () {
    // process and load the image into the canvas map marker
};
img.onerror = function () {
    // handle fallback                    
};

图像必须从 google 地图照片 api（以及我无法控制服务器上的 CORS 设置的其他 api）加载。这必须在应用程序中以某种方式处理。

这个问题有哪些可能的解决方案？

我发现的一件事是 ionic-image-loader (https://github.com/zyra/ionic-image-loader)，它使用离子原生 http 请求将图像加载和缓存到 img 标签中。虽然这从 html 开始工作，但我需要直接在 js/ts 中使用它，这似乎是不可能的。

如果我尝试通过 ionic http 请求加载图像，即使在浏览器中，请求也会被 CORS 阻止，而不是通过 img 标签加载图像。也许如果（以某种方式）可以将以下 header 设置为离子 http 请求，以便请求看起来相同：Sec-Fetch-Mode: no-cors

[WKWebView] 即使是本地图像也无法以这种方式加载，它显示：Access-Control-Allow-Origin 不允许 Origin null (Cannot load image: file:/// ... ) 然后它陷入试图加载图像的循环中。

Answer 1

通过使用带有 cordova 原生 http 的 ionic-image-loader 预加载函数的分支解决，完全绕过 webview 以获取 http 请求并手动处理缓存。这是 http 请求的完成方式，在 iOS WKWebView 上工作也是如此：

let options = {
    method: 'get',
    responseType: 'blob',
    data: {},
    headers: {}
};

cordova.plugin.http.sendRequest(url, options, (data: any) => {
    let blob = data.data;
    resolve(blob);
}, (error: any) => {
    console.log(error.status);
    console.log(error.error);
    reject(error.error);
});

如何将图像加载到 canvas 而没有离子 iOS 混合应用程序的 CORS 问题

How to load an image into a canvas without CORS issues for ionic iOS hybrid app

javascript

image

cors

ionic-framework

wkwebview