CODEWITHSUNDEEP
phpjavascripthtml
FunkyMonk91
FunkyMonk91

Reputation: 1481

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

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!

Upvotes: 0

Views: 1973

Answers (3)

Mehdi Karamosly
Mehdi Karamosly

Reputation: 5438

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

Upvotes: 0

leonvv
leonvv

Reputation: 180

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

Léon

Upvotes: 3

RonaldBarzell
RonaldBarzell

Reputation: 3830

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.

Upvotes: 0

Related Questions