How can I save a dynamically generated image to my database?

Question

I have an HTML page that captures a user's signature as an SVG. I convert it on the page to a .png and put it into an image container.

How can I utilize this to go into a database? I know how to do it using: <input type="file" /> but I have no clue how I would pass an <img /> element to PHP.

This changes my SVG to a PNG

       $("#save").click(function(){
          var datapair = sigdiv.jSignature("getData", "svg");
          var i = new Image();
          i.src = "data:" + datapair[0] + "," + datapair[1];
          $(i).appendTo($("#outputSvg"));

          var canvas = document.getElementById("canvas");

          canvg(canvas, datapair[1]);

          var img = canvas.toDataURL("image/png");
          $("#outputRaster").append("<img src='"+img+"'/>");
        });

How do I take the <img /> tag I am generating in <div id='outputRaster'> and pass it to my PHP? I know how to put it into the database, it's really just getting the image from my view layer to my PHP page, which is only being used for data access.

Any help or advice would be greatly appreciated!

Take a look at this: http://stackoverflow.com/questions/5292689/sending-images-from-canvas-elements-using-ajax-and-php-files — Benjamin Paap, Dec 06 '12 at 20:35

score 3 · Accepted Answer · answered Dec 06 '12 at 20:04

3

Save the image as a file. Store the file path in your database.

Léon

answered Dec 06 '12 at 20:04

leonvv

152
4

score 0 · Answer 2 · answered Dec 06 '12 at 20:04

0

If you are talking about the image itself, look up BLOBs (they stand for Binary Large Objects). They are the way to store large binary data in a database.

If you are talking about the tags, you'd store them like you would any other text.

answered Dec 06 '12 at 20:04

RonaldBarzell

3,822
1
16
23

I know how to put the image itself into the database. Usually I would just have an `` in my form and have users upload their own. This however, is an image I am generating. – FunkyMonk91 Dec 06 '12 at 20:14
Ahhhhh, an image generated on the fly, with no corresponding file eh? – RonaldBarzell Dec 06 '12 at 20:19
Yes sir! I posted my code in the original post so you can get an idea. – FunkyMonk91 Dec 06 '12 at 20:22
Have you tried using getImageData? Here's a link: http://www.w3schools.com/tags/canvas_getimagedata.asp – RonaldBarzell Dec 06 '12 at 20:25

score 0 · Answer 3 · edited May 23 '17 at 12:29

Supposing that you only need to save the path to the image (your image is stored in the server or you are using it from the internet.)

   $("#save").click(function(){
      var datapair = sigdiv.jSignature("getData", "svg");
      var i = new Image();
      i.src = "data:" + datapair[0] + "," + datapair[1];
      $(i).appendTo($("#outputSvg"));

      var canvas = document.getElementById("canvas");

      canvg(canvas, datapair[1]);

      var img = canvas.toDataURL("image/png");
      $("#outputRaster").append("<img src='"+img+"'/>");
      imageTag = "<img src='"+img+"'/>";
      //$.ajax( {url : yourUrl , data: imageTag} );
    });

if you need to upload image using jQuery you car read this article : link

How can I save a dynamically generated image to my database?

This changes my SVG to a PNG

3 Answers3

Linked