CODEWITHSUNDEEP
javascriptphpjqueryhtml
James121
James121

Reputation: 45

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

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");
 } 

 }

 ?>

Upvotes: 2

Views: 2378

Answers (2)

ddl877
ddl877

Reputation: 43

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

Upvotes: 1

pjmorse
pjmorse

Reputation: 9294

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.

Upvotes: 0

Related Questions