Javascript Chrome Tainted canvases may not be exported but firefox is not error
up vote
0
down vote
favorite
Svg image convert canvas to png but chrome browser is error: Tainted canvases may not be exported But Firefox is not error and image save and download.
my svg object:
I think error source can be foreignobject.because I remove this object,chrome not error.it has to stay svg inside
<svg xmlns="http://www.w3.org/2000/svg" id="drawcontentssvg" width="410" height="230" viewBox="-100 -70 410 230">
<defs><filter x="0" y="0" width="1" height="1" id="dhx_text_background">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic"></feComposite>
</filter></defs>
<g id="shapeImg" shape-rendering="crispedges">
<g transform="translate(0,0) rotate(0,105,45)" dhx_id="1">
<rect class="dhx_item_shape" id="1" height="90" width="210" fill="white" rx="1" ry="1" stroke="#FF9800" stroke-width="1"></rect>
<foreignObject overflow="hidden" transform="translate(0 0)" width="210" height="90"><div class="shape_content" style="height: 90px;">
<div style="text-align: center; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: rgba(0, 0, 0, 0.38); font-size: 14px; line-height: 17px; margin-top: 25px; white-space: nowrap; text-transform: uppercase;">fsfsfsfsf</div>
<div style="text-align: center;"></div></div>
</foreignObject>
<rect height="3.5" width="210" stroke="#FF9800" fill="#FF9800" stroke-width="1"></rect>
</g>
</g>
</svg>javascript
google-chrome svg canvas export edited Nov 20 at 14:03
Kaiido
38.4k45798
asked Nov 20 at 11:25
user9207422
1
add a comment |
up vote
0
down vote
favorite
Svg image convert canvas to png but chrome browser is error: Tainted canvases may not be exported But Firefox is not error and image save and download.
my svg object:
I think error source can be foreignobject.because I remove this object,chrome not error.it has to stay svg inside
<svg xmlns="http://www.w3.org/2000/svg" id="drawcontentssvg" width="410" height="230" viewBox="-100 -70 410 230">
<defs><filter x="0" y="0" width="1" height="1" id="dhx_text_background">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic"></feComposite>
</filter></defs>
<g id="shapeImg" shape-rendering="crispedges">
<g transform="translate(0,0) rotate(0,105,45)" dhx_id="1">
<rect class="dhx_item_shape" id="1" height="90" width="210" fill="white" rx="1" ry="1" stroke="#FF9800" stroke-width="1"></rect>
<foreignObject overflow="hidden" transform="translate(0 0)" width="210" height="90"><div class="shape_content" style="height: 90px;">
<div style="text-align: center; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: rgba(0, 0, 0, 0.38); font-size: 14px; line-height: 17px; margin-top: 25px; white-space: nowrap; text-transform: uppercase;">fsfsfsfsf</div>
<div style="text-align: center;"></div></div>
</foreignObject>
<rect height="3.5" width="210" stroke="#FF9800" fill="#FF9800" stroke-width="1"></rect>
</g>
</g>
</svg>javascript
google-chrome svg canvas export edited Nov 20 at 14:03
Kaiido
38.4k45798
asked Nov 20 at 11:25
user9207422
1
Possible duplicate of Problems with getting canvas dataURI from svg with foreignObject
– Kaiido
Nov 20 at 13:59
Firefox supports this, Chrome does not as you've already discovered. What else can we tell you?
– Robert Longson
Nov 20 at 15:07
thank u for helps Kaiido and Robert Longson
– user9207422
Nov 21 at 5:41
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Svg image convert canvas to png but chrome browser is error: Tainted canvases may not be exported But Firefox is not error and image save and download.
my svg object:
I think error source can be foreignobject.because I remove this object,chrome not error.it has to stay svg inside
<svg xmlns="http://www.w3.org/2000/svg" id="drawcontentssvg" width="410" height="230" viewBox="-100 -70 410 230">
<defs><filter x="0" y="0" width="1" height="1" id="dhx_text_background">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic"></feComposite>
</filter></defs>
<g id="shapeImg" shape-rendering="crispedges">
<g transform="translate(0,0) rotate(0,105,45)" dhx_id="1">
<rect class="dhx_item_shape" id="1" height="90" width="210" fill="white" rx="1" ry="1" stroke="#FF9800" stroke-width="1"></rect>
<foreignObject overflow="hidden" transform="translate(0 0)" width="210" height="90"><div class="shape_content" style="height: 90px;">
<div style="text-align: center; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: rgba(0, 0, 0, 0.38); font-size: 14px; line-height: 17px; margin-top: 25px; white-space: nowrap; text-transform: uppercase;">fsfsfsfsf</div>
<div style="text-align: center;"></div></div>
</foreignObject>
<rect height="3.5" width="210" stroke="#FF9800" fill="#FF9800" stroke-width="1"></rect>
</g>
</g>
</svg>javascript
google-chrome svg canvas export edited Nov 20 at 14:03
Kaiido
38.4k45798
asked Nov 20 at 11:25
user9207422
1
Svg image convert canvas to png but chrome browser is error: Tainted canvases may not be exported But Firefox is not error and image save and download.
my svg object:
I think error source can be foreignobject.because I remove this object,chrome not error.it has to stay svg inside
<svg xmlns="http://www.w3.org/2000/svg" id="drawcontentssvg" width="410" height="230" viewBox="-100 -70 410 230">
<defs><filter x="0" y="0" width="1" height="1" id="dhx_text_background">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic"></feComposite>
</filter></defs>
<g id="shapeImg" shape-rendering="crispedges">
<g transform="translate(0,0) rotate(0,105,45)" dhx_id="1">
<rect class="dhx_item_shape" id="1" height="90" width="210" fill="white" rx="1" ry="1" stroke="#FF9800" stroke-width="1"></rect>
<foreignObject overflow="hidden" transform="translate(0 0)" width="210" height="90"><div class="shape_content" style="height: 90px;">
<div style="text-align: center; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: rgba(0, 0, 0, 0.38); font-size: 14px; line-height: 17px; margin-top: 25px; white-space: nowrap; text-transform: uppercase;">fsfsfsfsf</div>
<div style="text-align: center;"></div></div>
</foreignObject>
<rect height="3.5" width="210" stroke="#FF9800" fill="#FF9800" stroke-width="1"></rect>
</g>
</g>
</svg><svg xmlns="http://www.w3.org/2000/svg" id="drawcontentssvg" width="410" height="230" viewBox="-100 -70 410 230">
<defs><filter x="0" y="0" width="1" height="1" id="dhx_text_background">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic"></feComposite>
</filter></defs>
<g id="shapeImg" shape-rendering="crispedges">
<g transform="translate(0,0) rotate(0,105,45)" dhx_id="1">
<rect class="dhx_item_shape" id="1" height="90" width="210" fill="white" rx="1" ry="1" stroke="#FF9800" stroke-width="1"></rect>
<foreignObject overflow="hidden" transform="translate(0 0)" width="210" height="90"><div class="shape_content" style="height: 90px;">
<div style="text-align: center; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: rgba(0, 0, 0, 0.38); font-size: 14px; line-height: 17px; margin-top: 25px; white-space: nowrap; text-transform: uppercase;">fsfsfsfsf</div>
<div style="text-align: center;"></div></div>
</foreignObject>
<rect height="3.5" width="210" stroke="#FF9800" fill="#FF9800" stroke-width="1"></rect>
</g>
</g>
</svg><svg xmlns="http://www.w3.org/2000/svg" id="drawcontentssvg" width="410" height="230" viewBox="-100 -70 410 230">
<defs><filter x="0" y="0" width="1" height="1" id="dhx_text_background">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic"></feComposite>
</filter></defs>
<g id="shapeImg" shape-rendering="crispedges">
<g transform="translate(0,0) rotate(0,105,45)" dhx_id="1">
<rect class="dhx_item_shape" id="1" height="90" width="210" fill="white" rx="1" ry="1" stroke="#FF9800" stroke-width="1"></rect>
<foreignObject overflow="hidden" transform="translate(0 0)" width="210" height="90"><div class="shape_content" style="height: 90px;">
<div style="text-align: center; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: rgba(0, 0, 0, 0.38); font-size: 14px; line-height: 17px; margin-top: 25px; white-space: nowrap; text-transform: uppercase;">fsfsfsfsf</div>
<div style="text-align: center;"></div></div>
</foreignObject>
<rect height="3.5" width="210" stroke="#FF9800" fill="#FF9800" stroke-width="1"></rect>
</g>
</g>
</svg>javascript
google-chrome svg canvas export javascript
google-chrome svg canvas export edited Nov 20 at 14:03
Kaiido
38.4k45798
asked Nov 20 at 11:25
user9207422
1
edited Nov 20 at 14:03
Kaiido
38.4k45798
asked Nov 20 at 11:25
user9207422
1
edited Nov 20 at 14:03
Kaiido
38.4k45798
edited Nov 20 at 14:03
Kaiido
38.4k45798
edited Nov 20 at 14:03
Kaiido
38.4k45798
38.4k45798
asked Nov 20 at 11:25
user9207422
1
asked Nov 20 at 11:25
user9207422
1
asked Nov 20 at 11:25
user9207422
1
1
Possible duplicate of Problems with getting canvas dataURI from svg with foreignObject
– Kaiido
Nov 20 at 13:59
Firefox supports this, Chrome does not as you've already discovered. What else can we tell you?
– Robert Longson
Nov 20 at 15:07
thank u for helps Kaiido and Robert Longson
– user9207422
Nov 21 at 5:41
add a comment |
Possible duplicate of Problems with getting canvas dataURI from svg with foreignObject
– Kaiido
Nov 20 at 13:59
Firefox supports this, Chrome does not as you've already discovered. What else can we tell you?
– Robert Longson
Nov 20 at 15:07
thank u for helps Kaiido and Robert Longson
– user9207422
Nov 21 at 5:41
Possible duplicate of Problems with getting canvas dataURI from svg with foreignObject
– Kaiido
Nov 20 at 13:59
Possible duplicate of Problems with getting canvas dataURI from svg with foreignObject
– Kaiido
Nov 20 at 13:59
Firefox supports this, Chrome does not as you've already discovered. What else can we tell you?
– Robert Longson
Nov 20 at 15:07
Firefox supports this, Chrome does not as you've already discovered. What else can we tell you?
– Robert Longson
Nov 20 at 15:07
thank u for helps Kaiido and Robert Longson
– user9207422
Nov 21 at 5:41
thank u for helps Kaiido and Robert Longson
– user9207422
Nov 21 at 5:41
add a comment |
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',
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%2f53391984%2fjavascript-chrome-tainted-canvases-may-not-be-exported-but-firefox-is-not-error%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53391984%2fjavascript-chrome-tainted-canvases-may-not-be-exported-but-firefox-is-not-error%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
Possible duplicate of Problems with getting canvas dataURI from svg with foreignObject
– Kaiido
Nov 20 at 13:59
Firefox supports this, Chrome does not as you've already discovered. What else can we tell you?
– Robert Longson
Nov 20 at 15:07
thank u for helps Kaiido and Robert Longson
– user9207422
Nov 21 at 5:41