我想将图像加载到用于显示自定义Google地图标记的画布中。以下代码适用于浏览器和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 Maps照片api（以及我无法控制服务器上的CORS设置的其他api）加载图像。这必须在应用程序中以某种方式处理。
有什么可能的解决方案？
我发现的一件事是ionic-image-loader（https://github.com/zyra/ionic-image-loader），它使用ionic本机http请求将图像加载和缓存到img标签中。但是，这可以从html运行，并且我需要直接在js / ts中使用它，这似乎是不可能的。
如果我尝试通过ionic http请求加载图像，即使在浏览器中，该请求也会被CORS阻止，而不是通过img标签加载图像。也许（以某种方式）可以将以下标头设置为ionic http请求，以便该请求看起来相同：Sec-Fetch-Mode：no-cors
[WKWebView]即使本地图像也无法以这种方式加载，并且显示：Access-Control-Allow-Origin不允许使用Origin null（无法加载图像：file：/// ...），然后卡在循环中尝试加载图像。
通过使用cordova本机http使用ionic-image-loader预加载功能的分支解决，完全绕过了HTTP请求的Webview并手动处理了缓存。这也是在iOS WKWebView上完成http请求的方式：
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);
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句