Storing and Retrieving Image Data URL

Question

Is it possible to store 'Data URL' extracted from a canvas by toDataURL("image/png"); in a database and reconstruct the image by retrieving this 'Data URL'? I have tried to store the 'data URL' to a BLOB .

Answer 1

toDataURL("image/png") method returns a data URI only. You can store that to sql database easily and the same can be retrieved and used to construct the image. You will have to set the src of the image with the retrieved data URI. Please refer this one also, this should give you an idea.

Answer 2

I don't understand all you want to make, but here is a little example of the process I used.

First convert the canvas to an imageUrl with canvas.toDataURL() which returns a DataURL of the canvas in .png format.

Client:

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

$.ajax({
  type: "POST",
  url: "PHPfile.php",
  data: {
     image: dataURL
  }
})

PHP:

<?php

    $conn = new PDO('mysql:host=XXXX;dbname=YYY', "ZZZ", "1234");

    $insert="insert into designs(image) values(:image)";        
    $stmt = $conn->prepare($insert);
    $stmt->bindValue(":image",$_POST["image"]);
    $stmt->execute();

Now you have the image stored on your DB.