I have stored the json output of canvas in database. I have a canvas with front and back view. When ever user submit the form using below code i am able to store the json in Database.
$('#save_canvas').click(function(e){
e.preventDefault();
var front_side_json = JSON.stringify( canvas1.toJSON() );
var back_side_json = JSON.stringify( canvas2.toJSON() );
$('#front_side_object').val(front_side_json);
$('#back_side_object').val(back_side_json);
$('#card_template_form').submit();
});
Now the issue is i want to generate the svg and png image using that json. I am not sure how to do that on server side.
I am able to generate it in client side using below code:
$('#download_svg').click(function(e){
try {
var isFileSaverSupported = !!new Blob;
var file_data = canvas.toSVG();
var blob = new Blob([file_data], {type: 'image/svg+xml;charset=utf-8'});
saveAs(blob, 'canvas.svg');
} catch (e) {
alert(e.message);
}
});
function downloadURI(uri, name) {
var link = document.createElement('a');
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
/* Download the PNG image */
$('#download_png').click(function(e){
try {
var isFileSaverSupported = !!new Blob;
var file_data = canvas.toDataURL('png');
downloadURI(file_data, 'canvas.png');
} catch (e) {
alert(e.message);
}
});
The reason to do that on server side is: i have a predefined card template. when ever user update there information, card should update accordingly. For that json which i have stored while generating "predefined card template" contain certain words which i will replace and generate the new card. exa: if json conatains {first_name}, i am replacing it with "DS9" etc.
So that's why i am trying to do that on server side.But i am not able to do that.