我需要能够将一个 div 更改为一个图像,然后使用 php 将图像上传到服务器。目前我可以将 div 下载为图像,然后我可以以 html 形式上传该图像,但我想取消这项工作。我只想单击一个按钮并且没有下载,但是从 div 到 png 的转换发生然后上传发生。我没有正确链接到我的 php 文件。
我一直在使用此链接将 div 转换为 png。效果很好,但我需要能够将它与我的 php 代码结合起来。用于转换和下载的 JS 文件在那里。我不想下载只是上传到服务器。
<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");
}
}
?>
最佳答案
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
关于javascript - 如何把一个div变成图片上传到服务器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25490473/