CODEWITHSUNDEEP
javascriptsqlimage
Sudhakar Pandey
Sudhakar Pandey

Reputation: 83

Storing and Retrieving Image Data URL

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.

Upvotes: 7

Views: 3496

Answers (2)

Malkev
Malkev

Reputation: 122

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.

Upvotes: 0

Debajit Majumder
Debajit Majumder

Reputation: 924

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.

Upvotes: 2

Related Questions