Mixing
Script in Edge with crossorigin when create an image from openstreetmap throw error
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I'm creating an image on Edge, when I set image.src to "http://b.tile.openstreetmap.org/2/3/1.png", image load failed, and I have tried two changes:
1. change src to "http://a.tile.opencyclemap.org/cycle/2/1/1.png", load success.
2. comment the line "image.crossOrigin = 'anonymous'", load success.
I find edge has "crossOrigin" property, but why image load fail? Is this a bug for Edge?
I find some similar problems MS Edge support crossorigin attribute?, but problem state is fixed.
Microsoft Edge 41.16299.820.0
(function() {
var button = document.getElementById('the-button');
button.onclick = function() {
var image = new Image();
image.crossOrigin = 'anonymous';
image.onload = function() {
console.log('image load succeeded');
}
image.onerror = function() {
console.log('image load failed!');
}
image.src = 'http://b.tile.openstreetmap.org/2/3/1.png';
}
})();<img src="http://b.tile.openstreetmap.org/2/3/1.png">
<!--http://a.tile.opencyclemap.org/cycle/2/1/1.png-->
<button id="the-button">Load image</button>javascript html cors openstreetmap microsoft-edge
edited Jan 26 at 22:17
TylerH
16.1k105569
asked Jan 3 at 8:06
shirleyRshirleyR
1
add a comment |
0
I'm creating an image on Edge, when I set image.src to "http://b.tile.openstreetmap.org/2/3/1.png", image load failed, and I have tried two changes:
1. change src to "http://a.tile.opencyclemap.org/cycle/2/1/1.png", load success.
2. comment the line "image.crossOrigin = 'anonymous'", load success.
I find edge has "crossOrigin" property, but why image load fail? Is this a bug for Edge?
I find some similar problems MS Edge support crossorigin attribute?, but problem state is fixed.
Microsoft Edge 41.16299.820.0
(function() {
var button = document.getElementById('the-button');
button.onclick = function() {
var image = new Image();
image.crossOrigin = 'anonymous';
image.onload = function() {
console.log('image load succeeded');
}
image.onerror = function() {
console.log('image load failed!');
}
image.src = 'http://b.tile.openstreetmap.org/2/3/1.png';
}
})();<img src="http://b.tile.openstreetmap.org/2/3/1.png">
<!--http://a.tile.opencyclemap.org/cycle/2/1/1.png-->
<button id="the-button">Load image</button>javascript html cors openstreetmap microsoft-edge
edited Jan 26 at 22:17
TylerH
16.1k105569
asked Jan 3 at 8:06
shirleyRshirleyR
1
2
loading an image shouldn't produce a cross origin error, are you sure that was the reason it failed in the first place? I updated your code to a snippet so people can actually test your code directly ;)
– Icepickle
Jan 3 at 8:29
Thank you! <br/> It's the first time to ask question, so my description may not clear. The problem reproduced by the following code <img src="b.tile.openstreetmap.org/2/3/1.png" crossorigin="Anonymous"> <img src="a.tile.opencyclemap.org/cycle/2/1/1.png" crossorigin="Anonymous">. The first image load failed.
– shirleyR
Jan 3 at 9:59
Based on your code, I create a sample on my side, it seems that everything works well on my side (using Edge 42.17134.1.0 and Edge 44.17763.1.0). So, I suggest you could try to upgrade the Edge version.
– Zhi Lv - MSFT
Jan 4 at 6:11
@ZhiLv-MSFT Thanks. I will try to upgrade the Edge. Does it work fine in new version of IE11? My IE11 version is 11.846.16299.0, it has the same problem.
– shirleyR
Jan 4 at 9:30
add a comment |
0
0
0
I'm creating an image on Edge, when I set image.src to "http://b.tile.openstreetmap.org/2/3/1.png", image load failed, and I have tried two changes:
1. change src to "http://a.tile.opencyclemap.org/cycle/2/1/1.png", load success.
2. comment the line "image.crossOrigin = 'anonymous'", load success.
I find edge has "crossOrigin" property, but why image load fail? Is this a bug for Edge?
I find some similar problems MS Edge support crossorigin attribute?, but problem state is fixed.
Microsoft Edge 41.16299.820.0
(function() {
var button = document.getElementById('the-button');
button.onclick = function() {
var image = new Image();
image.crossOrigin = 'anonymous';
image.onload = function() {
console.log('image load succeeded');
}
image.onerror = function() {
console.log('image load failed!');
}
image.src = 'http://b.tile.openstreetmap.org/2/3/1.png';
}
})();<img src="http://b.tile.openstreetmap.org/2/3/1.png">
<!--http://a.tile.opencyclemap.org/cycle/2/1/1.png-->
<button id="the-button">Load image</button>javascript html cors openstreetmap microsoft-edge
edited Jan 26 at 22:17
TylerH
16.1k105569
asked Jan 3 at 8:06
shirleyRshirleyR
1
I'm creating an image on Edge, when I set image.src to "http://b.tile.openstreetmap.org/2/3/1.png", image load failed, and I have tried two changes:
1. change src to "http://a.tile.opencyclemap.org/cycle/2/1/1.png", load success.
2. comment the line "image.crossOrigin = 'anonymous'", load success.
I find edge has "crossOrigin" property, but why image load fail? Is this a bug for Edge?
I find some similar problems MS Edge support crossorigin attribute?, but problem state is fixed.
Microsoft Edge 41.16299.820.0
(function() {
var button = document.getElementById('the-button');
button.onclick = function() {
var image = new Image();
image.crossOrigin = 'anonymous';
image.onload = function() {
console.log('image load succeeded');
}
image.onerror = function() {
console.log('image load failed!');
}
image.src = 'http://b.tile.openstreetmap.org/2/3/1.png';
}
})();<img src="http://b.tile.openstreetmap.org/2/3/1.png">
<!--http://a.tile.opencyclemap.org/cycle/2/1/1.png-->
<button id="the-button">Load image</button>(function() {
var button = document.getElementById('the-button');
button.onclick = function() {
var image = new Image();
image.crossOrigin = 'anonymous';
image.onload = function() {
console.log('image load succeeded');
}
image.onerror = function() {
console.log('image load failed!');
}
image.src = 'http://b.tile.openstreetmap.org/2/3/1.png';
}
})();<img src="http://b.tile.openstreetmap.org/2/3/1.png">
<!--http://a.tile.opencyclemap.org/cycle/2/1/1.png-->
<button id="the-button">Load image</button>(function() {
var button = document.getElementById('the-button');
button.onclick = function() {
var image = new Image();
image.crossOrigin = 'anonymous';
image.onload = function() {
console.log('image load succeeded');
}
image.onerror = function() {
console.log('image load failed!');
}
image.src = 'http://b.tile.openstreetmap.org/2/3/1.png';
}
})();<img src="http://b.tile.openstreetmap.org/2/3/1.png">
<!--http://a.tile.opencyclemap.org/cycle/2/1/1.png-->
<button id="the-button">Load image</button>javascript html cors openstreetmap microsoft-edge
javascript html cors openstreetmap microsoft-edge
edited Jan 26 at 22:17
TylerH
16.1k105569
asked Jan 3 at 8:06
shirleyRshirleyR
1
edited Jan 26 at 22:17
TylerH
16.1k105569
asked Jan 3 at 8:06
shirleyRshirleyR
1
edited Jan 26 at 22:17
TylerH
16.1k105569
edited Jan 26 at 22:17
TylerH
16.1k105569
edited Jan 26 at 22:17
TylerH
16.1k105569
16.1k105569
asked Jan 3 at 8:06
shirleyRshirleyR
1
asked Jan 3 at 8:06
shirleyRshirleyR
1
asked Jan 3 at 8:06
shirleyRshirleyR
1
1
2
loading an image shouldn't produce a cross origin error, are you sure that was the reason it failed in the first place? I updated your code to a snippet so people can actually test your code directly ;)
– Icepickle
Jan 3 at 8:29
Thank you! <br/> It's the first time to ask question, so my description may not clear. The problem reproduced by the following code <img src="b.tile.openstreetmap.org/2/3/1.png" crossorigin="Anonymous"> <img src="a.tile.opencyclemap.org/cycle/2/1/1.png" crossorigin="Anonymous">. The first image load failed.
– shirleyR
Jan 3 at 9:59
Based on your code, I create a sample on my side, it seems that everything works well on my side (using Edge 42.17134.1.0 and Edge 44.17763.1.0). So, I suggest you could try to upgrade the Edge version.
– Zhi Lv - MSFT
Jan 4 at 6:11
@ZhiLv-MSFT Thanks. I will try to upgrade the Edge. Does it work fine in new version of IE11? My IE11 version is 11.846.16299.0, it has the same problem.
– shirleyR
Jan 4 at 9:30
add a comment |
2
loading an image shouldn't produce a cross origin error, are you sure that was the reason it failed in the first place? I updated your code to a snippet so people can actually test your code directly ;)
– Icepickle
Jan 3 at 8:29
Thank you! <br/> It's the first time to ask question, so my description may not clear. The problem reproduced by the following code <img src="b.tile.openstreetmap.org/2/3/1.png" crossorigin="Anonymous"> <img src="a.tile.opencyclemap.org/cycle/2/1/1.png" crossorigin="Anonymous">. The first image load failed.
– shirleyR
Jan 3 at 9:59
Based on your code, I create a sample on my side, it seems that everything works well on my side (using Edge 42.17134.1.0 and Edge 44.17763.1.0). So, I suggest you could try to upgrade the Edge version.
– Zhi Lv - MSFT
Jan 4 at 6:11
@ZhiLv-MSFT Thanks. I will try to upgrade the Edge. Does it work fine in new version of IE11? My IE11 version is 11.846.16299.0, it has the same problem.
– shirleyR
Jan 4 at 9:30
2
2
loading an image shouldn't produce a cross origin error, are you sure that was the reason it failed in the first place? I updated your code to a snippet so people can actually test your code directly ;)
– Icepickle
Jan 3 at 8:29
loading an image shouldn't produce a cross origin error, are you sure that was the reason it failed in the first place? I updated your code to a snippet so people can actually test your code directly ;)
– Icepickle
Jan 3 at 8:29
Thank you! <br/> It's the first time to ask question, so my description may not clear. The problem reproduced by the following code <img src="b.tile.openstreetmap.org/2/3/1.png" crossorigin="Anonymous"> <img src="a.tile.opencyclemap.org/cycle/2/1/1.png" crossorigin="Anonymous">. The first image load failed.
– shirleyR
Jan 3 at 9:59
Thank you! <br/> It's the first time to ask question, so my description may not clear. The problem reproduced by the following code <img src="b.tile.openstreetmap.org/2/3/1.png" crossorigin="Anonymous"> <img src="a.tile.opencyclemap.org/cycle/2/1/1.png" crossorigin="Anonymous">. The first image load failed.
– shirleyR
Jan 3 at 9:59
Based on your code, I create a sample on my side, it seems that everything works well on my side (using Edge 42.17134.1.0 and Edge 44.17763.1.0). So, I suggest you could try to upgrade the Edge version.
– Zhi Lv - MSFT
Jan 4 at 6:11
Based on your code, I create a sample on my side, it seems that everything works well on my side (using Edge 42.17134.1.0 and Edge 44.17763.1.0). So, I suggest you could try to upgrade the Edge version.
– Zhi Lv - MSFT
Jan 4 at 6:11
@ZhiLv-MSFT Thanks. I will try to upgrade the Edge. Does it work fine in new version of IE11? My IE11 version is 11.846.16299.0, it has the same problem.
– shirleyR
Jan 4 at 9:30
@ZhiLv-MSFT Thanks. I will try to upgrade the Edge. Does it work fine in new version of IE11? My IE11 version is 11.846.16299.0, it has the same problem.
– shirleyR
Jan 4 at 9:30
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018455%2fscript-in-edge-with-crossorigin-when-create-an-image-from-openstreetmap-throw-er%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018455%2fscript-in-edge-with-crossorigin-when-create-an-image-from-openstreetmap-throw-er%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
loading an image shouldn't produce a cross origin error, are you sure that was the reason it failed in the first place? I updated your code to a snippet so people can actually test your code directly ;)
– Icepickle
Jan 3 at 8:29
Thank you! <br/> It's the first time to ask question, so my description may not clear. The problem reproduced by the following code <img src="b.tile.openstreetmap.org/2/3/1.png" crossorigin="Anonymous"> <img src="a.tile.opencyclemap.org/cycle/2/1/1.png" crossorigin="Anonymous">. The first image load failed.
– shirleyR
Jan 3 at 9:59
Based on your code, I create a sample on my side, it seems that everything works well on my side (using Edge 42.17134.1.0 and Edge 44.17763.1.0). So, I suggest you could try to upgrade the Edge version.
– Zhi Lv - MSFT
Jan 4 at 6:11
@ZhiLv-MSFT Thanks. I will try to upgrade the Edge. Does it work fine in new version of IE11? My IE11 version is 11.846.16299.0, it has the same problem.
– shirleyR
Jan 4 at 9:30