Exporting the svg as image does not work in Chrome, when the svg contains an embedded image

[ebay-amahna]

The functionality works as expected for an svg containing an image element in FireFox but does not work in Chrome. There are no errors in the console when executing the script, but the download dialog box does not show up in Chrome. Any clues as to what the issue could be here ?

Thanks

[exupero]

Thanks for reporting this. Please provide an example SVG that has the problem so I can investigate.

[ebay-amahna]

svg-print.txt

[ebay-amahna]

The svg contains an inline image and attempt at png conversion is throwing this error:

saveSvgAsPng.js:34 Uncaught SecurityError: Failed to execute 'toDataURL' on
'HTMLCanvasElement': Tainted canvases may not be exported.
img.onload @ saveSvgAsPng.js:34

This works fine in FF though.

[ebay-amahna]

FYI....this issue with Chrome loading CORS image to a canvas is documented here : https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image.

I'm getting the issue despite the fact that the image is loaded from the same domain and has the Access-Control-Allow-Origin header set to '*'.

[vinoth-rz]

I am also facing the same problem, below is my image data in svg

<image
xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA/CAMAAABAbb8QAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAilBMVEUAAAAAAAAAAACnKRkxDAcAAADyPCTyPCTyPCTyPCTyPCTyPCTyPCTyPCTyPCTyPCTyPCTyPCTyPCTyPCQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC8LxxhGA4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADyPCQeCAXe6RXhAAAAK3RSTlMAYMDonoDAQNBg4IAQ8JAgoHAwsBBoWEAoIIwI96BI4DB4GHA4UNy8wrDUn6DeAQAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAGpSURBVFjDrdbpVoMwEAXgAaVaq9YFKDTasroR3//1DDFVKJBMkpl/7en5yrkMlwAYJwjDi0vzz/ATdR3nqytikPPrNTHI+c3mlhbk/O5+SwuKefAPcwyK++Mb5jkowlx7hTkFRZgbjzDnwD5MZ3IBdF/2RbAPkxh0W3YtKO6PdZgG0H7ZzaDlsmNAEeYjOkwcaLHsWLAP84kY5CvMReJB3AViQXxfoECLm4wB7TrXCD5bto4etH+UtaDTm3UZdKvDRdD5dDIPur9S5kCvl94U9Hwtn4PeB4cxSHC0GYA0h68/ELnEcRKJSQI16e40Wa5mL0H8AZalkX5CAb68jv4215MHI/h9HHxOC2a6yKI0gN3RQuunqlFg0qA0GWRiBJMmtlqOVgu+WWoySB0YWnN9kLO3pj7sXcGZIMs2k0+KIwisnWjgBQI0/+ubnb7zAiGXQZbD9fUDofotCzpQlUVZkYEAOxliQQdCJoNs6UBVFgEjA4EF8impyEDVumVBB6qyONCBqiwCRgaqsqjd22Y6sizeCUEZpHPBzo4oix78IAMhTj8F+IX+/Q8BvrYsscQ/JQAAAABJRU5ErkJggg==" />

I am trying to convert it to png, but the image tag elements are neglected in image

[exupero]

@vinoth-rz Try changing the mimetype in your data URI to image/png.

[exupero]

@ebay-amahna Your example shouldn't have a problem with CORS because it isn't loading the image using an absolute path.

Does it work if you convert your image from a JPG to a PNG?

[ebay-amahna]

@exupero, I was able to find the reason why the solution didn't work in Chrome for my use-case. It took a day to identify that as In Chrome, there was no error on the console, but the svg wouldn't download.

I was hitting a size limit on the canvas. Using a scaling factor of .6 resolved my issue. I will figure out the exact size limit so that the scaling can be added conditionally.

[exupero]

I'm glad you figured it out! Can you share what references you found about the size limit? You're right that it would be good to warn users when the image will be too big.

[ebay-amahna]

I wanted to update you on this issue. Based on information in this link (http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element), I realized that I seemed to be hitting the issue with much smaller images e.g. the specific image that wouldn't work for me in Chrome had a width of 800 px and height of 3100 px. I modified the code canvas.toDataUrl was getting invoked to use 'image/jpeg' instead of 'image/png' and the code worked like a charm after that with no scaling needed. I was able to test with the largest possible image for our app and still didn't run into issues.

[ebay-amahna]

Thanks again for the good work and you can mark the issue closed.