How to turn a div into an image and upload it to a server?

Question

I need to be able to change a div into an image and then upload the image to the server using php. Currently I can download the div as an image and I can then upload this image in a html form but I want to cut out this work. I just want to click a button and have no download, but the conversion from div to png to happen and then the upload to happen. I'm not linking to my php file correctly.

I've been using this link to turn a div into a png. Works well but I need to able to combine this with my php code. The JS files for converting and downloading are there. I don't want to download just upload to the server.

http://jsfiddle.net/8ypxW/3/

  <div class="offer_display" id="offer_display">

  <div class="title" id="title"></div>
  <img class ="image" id="pic" src="#" alt="your image" />

</div>

<input type="button" id="btnSave" value="Save PNG" onclick='saving_offer.php'/>   

</body>
<script>

$(function() { 
$("#btnSave").click(function() { 
    html2canvas($("#offer_display"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas); 
            $("#img-out").append(canvas);
            // Clean up 
            document.body.removeChild(canvas);

        }
    });
  });

  });

There's my PHP file. This should take the png file and upload the path to the mySQL and the image to the server. This works correctly. There might be an issue with the variable name canvas.

<?php
$connection = mysql_connect("localhost", "xxx", "xxxxxx");

if(!$connection){
die('Could not connect to server: ' . mysql_error());
}

mysql_select_db("mscim2014_mmg6", $connection);


function GetImageExtension($imagetype)
{
if(empty($imagetype)) return false;
switch($imagetype)
{
   case 'image/bmp': return '.bmp';
   case 'image/gif': return '.gif';
   case 'image/jpeg': return '.jpg';
   case 'image/png': return '.png';
   default: return false;
 }
 }

if (!empty($_FILES['canvas']['name'])) {

$file_name=$_FILES["canvas"]['name'];
$temp_name=$_FILES['canvas']['tmp_name'];
$imgtype=$_FILES['canvas']['type'];
$ext= GetImageExtension($imgtype);
$imagename=date('d-m-Y').'-'.time().$ext;
$target_path = "http://server/~name/folder/images/".$imagename;
$act_path = "images/".$imagename;

if(move_uploaded_file($temp_name, $act_path)) {
chmod($act_path, 0777);

$query_upload="INSERT into `offerstbl` (`ImagesPath`,`SubmissionDate`) VALUES

('".$target_path."','".date("Y-m-d")."')";
 mysql_query($query_upload) or die("error in $query_upload == ---->   ".mysql_error());  


 }else{

  exit("Error While uploading image on the server");
 } 

 }

 ?>

Seems you already have it converted to a canvas, so here is a good answer of how to save a canvas to a server. http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server — 2pha, Aug 25 '14 at 16:43

score 1 · Answer 1 · edited May 23 '17 at 12:34

1

The canvas object contains a toDataURL() method that returns a string.

var strDataURI = oCanvas.toDataURL();
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

Passing this string back to the server using any method you prefer should do the trick.

On the server you'll just need to decode the base64 encodeing and save the file. See base64-decode

See also the answer cited by @2pha: How to save a HTML5 Canvas as Image on a server

edited May 23 '17 at 12:34

Community

1
1

answered Aug 25 '14 at 16:58

ddl877

43
5

`toDataURL()` is a native function to the canvas element, no library needed. – 2pha Aug 25 '14 at 17:21

score 0 · Answer 2 · answered Aug 25 '14 at 17:08

This might be overkill for your use case, but the Shutterbug utility will grab images from snippets of styled DOM by using PhantomJS to render the DOM. It looks like you're following a different approach (HTML -> Canvas -> image) but if you're doing this repeatedly a Shutterbug instance might be useful.

How to turn a div into an image and upload it to a server?

2 Answers2