I am attempting to develop a custom directive that will allow me to convert an SVG file into a JPG or PNG format. I stumbled upon this website:
http://bl.ocks.org/mbostock/6466603
So, I decided to try and implement something similar with the following code snippet:
.directive('export', function () {
return {
restrict: 'A',
scope: {
target: '@export'
},
link: function (scope, element) {
// Attach the click event listener to our button
element.bind('click', function (e) {
// Prevent the default action
e.preventDefault();
var target = document.getElementById(scope.target),
canvas = document.querySelector('canvas'),
context = canvas.getContext('2d');
console.log(target);
if (target) {
var preview = target.getElementsByTagName('svg');
console.log(preview);
var img = new Image;
img.src = preview[0];
img.onload = function () {
console.log('loaded');
};
}
});
}
};
});
The issue lies with the img.src. I'm uncertain if I am setting it correctly as the example on the aforementioned site uses a location instead of the actual svg file. Could someone provide guidance on how I can make this work?