Question

我需要能够将div更改为图像，然后使用php将图像上传到服务器。目前我可以将div下载为图像，然后我可以以html格式上传此图像，但我想删除这项工作。我只想点击一个按钮，没有下载，但是从div到png的转换发生，然后上传发生。我没有正确链接到我的php文件。

我一直在使用此链接将div变成png。效果很好，但我需要能够将它与我的PHP代码结合起来。用于转换和下载的JS文件就在那里。我不想下载只是上传到服务器。

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

        }
    });
  });

  });

有我的PHP文件。这应该采用png文件并将路径上传到mySQL，将图像上传到服务器。这工作正常。变量名称画布可能存在问题。

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

 }

 ?>

Answer 1

canvas对象包含一个返回字符串的toDataURL()方法。

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

使用您喜欢的任何方法将此字符串传回服务器应该可以解决问题。

在服务器上，您只需要解码base64编码并保存文件。见base64-decode

另见@ 2pha引用的答案：How to save a HTML5 Canvas as Image on a server

Answer 2

对于您的用例，这可能有点过分，但Shutterbug实用程序将通过使用PhantomJS呈现DOM来从样式化DOM的片段中获取图像。看起来你正在采用不同的方法（HTML - ＆gt; Canvas - ＆gt;图像），但如果你反复这样做，Shutterbug实例可能会有用。

如何将div转换为图像并将其上传到服务器？

2 个答案: