0

I want to store the canvas image into a blob field.

on the server side I receive a base64 encoded string from toDataUrl()

  • What do I have to do to get it into a blob field?

  • And how do I display it again in an img tag?

What code do I need to use? The mysql page is not very clear, and I use PDO prepared statements.

pb2q
  • 58,613
  • 19
  • 146
  • 147
Richard
  • 4,516
  • 11
  • 60
  • 87
  • possible duplicate of [PHP/PDO/MySQL: inserting into MEDIUMBLOB stores bad data](http://stackoverflow.com/questions/6346319/php-pdo-mysql-inserting-into-mediumblob-stores-bad-data) – hakre Sep 30 '12 at 18:05
  • @hakre not quite, because the OP is concerning the decoding of the data URI – Alvin Wong Sep 30 '12 at 18:11
  • @AlvinWong: I'm not so sure about that because in [previous question](http://stackoverflow.com/questions/12651504/how-to-send-html5-canvas-image-with-email) of Richard *that* problem should have been solved already. – hakre Sep 30 '12 at 18:13
  • I have everything working in that post, that's true, but I don't know anything about blob. All the posts that I have read are keeping it vague as what to do with the base64. – Richard Sep 30 '12 at 18:18
  • why would anyone vote for close, this is annoying, just give some helpfull info – Richard Sep 30 '12 at 18:19
  • @Richard: Convert it from base64 to binary with [base64_decode](http://php.net/manual/en/function.base64-decode.php) - also [PHP Data-URI to file](http://stackoverflow.com/questions/6735414/php-data-uri-to-file) – hakre Oct 01 '12 at 10:40

1 Answers1

1

If you really need to store it in blob data, you can do this:

For PHP >=5.2.0, you can use the data:// stream wrapper to retrieve file from a data uri:

$file_in_blob = file_get_contents("data://".$var_containing_the_data_uri);

where $var_containing_the_data_uri should be replaced by the variable containing the data URI, for example $_POST['image']. Then you can insert the $file_in_blob to the database.

When you need to display it in a webpage again, you can:

  1. write a PHP script that retrieves the blob content according to a GET parameter, and use it as an src for the image tag, or
  2. directly use the original data URI obtained from toDataUrl() as the src of the image tag.

If you use method 2, you don't actually need to decode the data URI into blob, but store the data URI directly. (Of course you may be concerned of the data size...)

Method 1 example:

Your HTML:

<img src="img_from_db.php?img=1" />

Your img_from_db.php:

<?php
header('Content-Type: image/png'); // make the browser recognize it as PNG
echo get_image_blob_from_db($_GET['img']); // you may wish to add some checks

Method 2 example:

<img src="<?=get_image_dataURI()?>" />
Alvin Wong
  • 12,210
  • 5
  • 51
  • 77
  • does $_post['image'] not have to be stripped from the first part in your example(the image info sendwith toDataUrl? – Richard Sep 30 '12 at 18:32
  • is the streamwrapper just another way of creating a file just like -- fopen and fwrite. If so then I understand how it works. Do I have to use loadFile for a blobfield or just use it like any other field? – Richard Sep 30 '12 at 18:34
  • 1
    I have stopped trying to attempt to store it in the database.It is not working for some reason. Also, it is simpeler to store it in the filesystem, because it involves less coding. If anyone votes to delete this post, I will delete it! – Richard Oct 06 '12 at 08:00