問題描述
我正在使用 leaflet-image.js 從傳單地圖創(chuàng)建圖像.用于創(chuàng)建圖像的代碼是
你能幫我解決這個(gè)問題嗎?(而且我所有的服務(wù)器都是本地托管的.Webserver、mapserver ...)
一般情況下，一個(gè)網(wǎng)站中運(yùn)行的javascript代碼不能訪問其他網(wǎng)站的資源.但是來自網(wǎng)站的 javascript 應(yīng)該能夠訪問來自同一網(wǎng)站的資源.這稱為 same-origin policy，并已實(shí)施所有主流瀏覽器(不僅僅是 Chrome).
也請(qǐng)閱讀 https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs 和 禁用同源策略鉻 .
最快的解決方案是通過您的 localhost:8080 網(wǎng)站訪問圖像 - 然后，該網(wǎng)站中的 javascript 將能夠訪問同一網(wǎng)站中的圖像資源.
I'm using leaflet-image.js to create an image from a leaflet map. The code used to create the image is the one in the example at https://github.com/mapbox/leaflet-image ie
var map = L.mapbox.map('map', 'YOUR.MAPID').setView([38.9, -77.03], 14);
leafletImage(map, function(err, canvas) {
// now you have canvas
// example thing to do with that canvas:
var img = document.createElement('img');
var dimensions = map.getSize();
img.width = dimensions.x;
img.height = dimensions.y;
img.src = canvas.toDataURL();
document.getElementById('images').innerHTML = '';
document.getElementById('images').appendChild(img);
});
The problem is that the image seems to be blocked by some CORS security feature. Below is an image of the Google Chrome console (not that enevn in firefox it does not work)
Could you help me with that ? (Also all my server are locally hosted. Webserver, mapserver ...)
In general, javascript code running in a website cannot access resources from other websites. But a javascript from a website should be able to access resources from that same website. This is called same-origin policy, and is implemented by all major browsers (not just Chrome).
Do read also https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs and Disable same origin policy in Chrome .
The quickest solution is to have the image reachable via your localhost:8080 website - then, the javascript in that website will be able to access a image resource in the same website.
這篇關(guān)于來自“file://"的圖像已被跨源資源共享策略阻止加載:的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！