javascript - 如何把一个div变成图片上传到服务器？

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 并将图像上传到服务器。这工作正常。变量名称 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");
 } 

 }

 ?>

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