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

【问题标题】：How to turn a div into an image and upload it to a server?如何将 div 转换为图像并将其上传到服务器？
【发布时间】：2014-10-18 20:57:00
【问题描述】：

我需要能够将 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 并将图像上传到服务器。这可以正常工作。变量名 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");
 } 

 }

 ?>

【问题讨论】：

似乎您已经将其转换为画布，因此这里是如何将画布保存到服务器的一个很好的答案。 stackoverflow.com/questions/13198131/…

标签： javascript php jquery html

【解决方案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

【讨论】：

toDataURL() 是 canvas 元素的原生函数，不需要库。

【解决方案2】：

这对于您的用例来说可能是多余的，但Shutterbug 实用程序将通过使用 PhantomJS 呈现 DOM 从样式化 DOM 的 sn-ps 中获取图像。看起来您正在采用不同的方法（HTML -> Canvas -> 图像），但如果您反复这样做，Shutterbug 实例可能会很有用。

【讨论】：