1

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.

DS9
  • 2,995
  • 4
  • 52
  • 102
  • If its not possible, alternate way also work. Like store raw svg in Database etc. I am not sure its possible or not. – DS9 Oct 10 '17 at 12:24
  • i ended up by storing json and svg both to database. Json to render canvas and svg to create png file. – DS9 Oct 18 '17 at 09:00

0 Answers0