ImageLayer的source访问跨域图片
muyu66 opened this issue · comments
问题描述
我有个需求是通过ImageLayer().source(跨域URL图片) 作为地图的底图，但是因为l7内部使用了XHR实现，所以导致前端拿不到跨域的图片，该如何解决？
尝试的方式如下：
-
直接使用
ImageLayer().source(‘[https](https://xxx.png)’)
报错如下：
Access to XMLHttpRequest at 'https://xxx.png' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. -
Image对象
const img = new Image(); img.src="https://xxx.png"; ImageLayer().source(img)
但是报错说
DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded
重现链接
No response
重现步骤
No response
预期行为
No response
平台
-
操作系统: [macOS, Windows, Linux, React Native ...]
Windows -
网页浏览器: [Google Chrome, Safari, Firefox]
Chrome Edge
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
hi @muyu66, welcome!
function startDownload() {
let imageURL =
"https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
let imageDescription = "The Mozilla logo";
downloadedImg = new Image();
downloadedImg.crossOrigin = "Anonymous";
downloadedImg.addEventListener("load", imageReceived, false);
downloadedImg.alt = imageDescription;
downloadedImg.src = imageURL;
}
function imageReceived() {
new ImageLayer().source(img)
}https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image
你好，我可能没有表达清楚我的意思。
issue的前提是，服务器没有为我配置跨域规则，比如图片地址是：
https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
我没法要求百度将我加入跨域规则之中。所以我无法访问这个图片
报错信息如下：
Access to image at 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
碰到这种情况除了后端接口转发这种之外，有没有单纯能靠前端解决的方案？(我找了很久，似乎没有)
@lvisei
补充一点，我看了leaflet的实现（leaflet和l7应该都是基于canvas绘画的，所以我想他们具有共同性），它可以直接使用未验证的跨域图片作为图片Layer。
示例如下：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""
/>
<style>
#map {
height: 380px;
}
</style>
<script
src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""
></script>
<title>Document</title>
</head>
<body>
<div id="map"></div>
<script>
const 无需跨域 =
"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*I0X5R4jAUQ4AAAAAAAAAAAAAARQnAQ";
const 需要跨域 =
"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";
var map = L.map("map", {
center: [51.505, -0.09],
zoom: 13,
});
var imageUrl = 需要跨域;
L.imageOverlay(imageUrl).addTo(map);
</script>
</body>
</html>想知道如何实现同样的功能在l7里