I am facing a puzzling issue where two different SVG elements are causing my JavaScript to work in one scenario but not the other. I have replaced the SVG elements in both examples, and surprisingly, only one works while the other does not. You can view the code in two separate jsFiddles, with the working example obtained from here.
My main objective is to save the current SVG element of a floor plan and insert the converted PNG as an inline image inside a rich text area. Imagine taking a cropped screenshot of the floor plan and pasting it into a rich text area similar to what you see on helpdesk sites. However, I am encountering difficulties in converting it to a PNG format.
Working Example: JsFiddle
Not Working Example: JsFiddle
Due to character limit constraints on Stackoverflow, I cannot include the SVG code here.
var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2'));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {
type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
document.querySelector('#png-container').innerHTML = '<img src="' + png + '"/>';
DOMURL.revokeObjectURL(png);
};
img.src = url;
Edit:
After experimenting, I have settled on a code that excludes the PNG/canvas conversions and attempts to directly place the serialized SVG string into the rich text area. However, I encountered an error in IE stating "Non-default namespace declarations must not have an empty URI. Line: 1, column142".
var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2'));
var img = new Image();
var url = "data:image/svg+xml; charset=utf8, "+encodeURIComponent(svgString);
img.onload = function() {
document.querySelector('.ze_body').innerHTML = '<img src="'+url+'"/>';
};
img.src = url;
To provide more context, I believe it would be beneficial to show the structure in which the rich text area currently exists. This layout is pre-existing in a product we utilize, and I am attempting to embed maps into the description area for better ticket management. Our access is limited to using JavaScript triggered through form rules.
Screenshot of ze_body element within the DOM for reference