I have a straightforward base64 image that I am having trouble with. The issue is that only the upper half of the image is displaying. If I try to adjust the height using the "style" attribute in the img tag:
style="height: 300px;"
it shows correctly. However, when I attempt to copy the image (right-click, copy image), it doesn't function in Firefox, and only copies the upper half in Chrome/Opera.
The Javascript code generates the image from an SVG element like this:
var svgData = new XMLSerializer().serializeToString(svg[0]);
var img = new Image();
img.src = "data:image/svg+xml;base64," + btoa(svgData);
The purpose of converting the SVG to an actual image is to make it easy for users to copy. The application I am working on is an editor with numerous background/foreground combinations, so external conversion tools are not feasible.
What could be causing this issue?
Edit: More comprehensive jsfiddle link available here: http://jsfiddle.net/p2Lv5sa0