I saved the canvas json output in the database. I have a canvas with a front and rear view. When the user submits the form using the code below, I can save json in the 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 problem is that I want to generate svg and png image using json. I am not sure how to do this on the server side.
I can generate it on the client side using the following 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_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 for this is server side: I have a predefined map template. when ever the user updates information, the map should be updated accordingly. For this json, which I saved when creating the "predefined map template", there are certain words that I replaced and generated a new map. exa: if json conatains {first_name}, I replace it with “DS9”, etc.
So why am I trying to do this on the server side. But I can’t do it.
json php svg fabricjs
DS9
source share