将画布和表单发送到服务器使用自定义名称保存图像 [英] Send canvas and form to server save image with custom name
本文介绍了将画布和表单发送到服务器使用自定义名称保存图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图将画布图像发送到服务器。
大家好，我知道这已经被问了很多。 （我已经问过一次）
表单数据也被发送，这用于命名发送到服务器的文件，以便可以识别谁图片。
我的网站是此处！
HTML
< form action =PHPtestupload.phpmethod =post>
Name< input type =textname =namevalue =style =width：230px; margin-left：-160px; font-size：1em;/>
电子邮件< input type =emailname =emailvalue =style =width：230px; margin-top：12px; margin-left：-160px; font-size： 1em;/>
< input type =submitonclick =postImagePlusForm（）; value =Submitstyle =opacity：1; -webkit-appearance：none; width：100px; height：50px; margin-left：-50px;>
< / form>
JS
//发送图像到服务器
//序列化你的画布
var dataURL = document.getElementById（'colors_sketch'）。toDataURL（image / png）;
//序列化你的形式
var str = $（form）。serializeArray（）;
//在对象中换行
var package = {formData：str，imageDataURL：dataURL}
// ajax it
postImagePlusForm（）;
function postImagePlusForm（）{
$ .ajax（{
type：POST，
url：PHPtestupload.php，
data： package，
success：function（value）{
// ... we have success！
}
}）;
}
PHP
if（isset（$ _ POST [imageDataURL]）&&！empty（$ _ POST [imageDataURL]）））{
// create $ dataURL
$ dataURL = $ _POST [imageDataURL];
//提取base64数据
//我们有一个不需要的头，zap it
$ parts = explode（'，'，$ dataURL）;
$ data = $ parts [1];
//解码
$ data = base64_decode（$ data）;
//保存
$ fp = fopen（'newImage.png'，'w'）;
fwrite（$ fp，$ data）;
fclose（$ fp）;
if（isset（$ _ POST [formData]）&&！empty（$ _ POST [formData]））{
$ formData = $ _POST ['formData' ];
foreach（$ formValue as $ x）{
//对任何你需要做的每个表单值（$ x）
}
在网页上使用不同的Javascript替代PHP，半工作网站在这里！
我认为服务器关闭PHP是因为它在本地运行， t在线时工作。它会产生大量错误日志。
$ data = file_get_contents（'php：// input'）;
$ canvasImg = imagecreatefrompng（$ data）;
$ width = imagesx（$ canvasImg）;
$ height = imagesy（$ canvasImg）;
$ outImg = imagecreatetruecolor（$ width，$ height）;
$ color = imagecolorallocatealpha（$ outImg，255，255，255，127）;
imagefill（$ outImg，0，0，$ color）;
imagecopy（$ outImg，$ canvasImg，0，0，0，0，$ width，$ height）;
imagepng（$ outImg，'test.png'）;
$ name = $ _POST ['name'];
$ email = $ _POST ['email'];
$ target ='test.png';
$ newName = $ name。 $ email;
rename（$ target，$ newName）;
解决方案
尝试：
$ dataURL = $ _POST [imageDataURL];
$ dataURL = str_replace（'data：image / png; base64，'，''，$ dataURL）;
$ dataURL = str_replace（''，'+'，$ dataURL）;
$ image = base64_decode（$ dataURL）;
$ filename ='newImage.png';
file_put_contents（'path / to /'。$ filename，$ image）;
此外，在您的Javascript中，您错过了 .toDataURL
var dataURL = document.getElementById（'colors_sketch'）。toDataURL（'image / png'）;
--- UPDATE --- b
在你的情况下，图像数据实际上没有被传递到你的上传处理程序（PHPtestuplaod.php），因为提交表单将导致页面重定向。因此，有关此问题的可能解决方法是：
HTML
<
<！ - 将此内容添加到您的表单中。
这将用于携带图像数据到
上传处理程序 - >
< input type =hiddenname =imageDataid =imageData/>
jQuery
$（form）。submit（function（e）{
//让我们现在避免默认行为，
//有时间包括图像数据
e.preventDefault（）;
//获取画布图像数据
var imageData = document.getElementById（colors_sketch）。toDataURL image / png）;
//让我们之前添加的隐藏字段将图像数据携带到上传处理程序
$（＃imageData）。val（imageData）;
//提交表单
$（this）.submit（）;
}）;
PHP
$ dataURL = $ _POST [imageData];
$ dataURL = str_replace（'data：image / png; base64，'，''，$ dataURL）;
$ dataURL = str_replace（''，'+'，$ dataURL）;
$ image = base64_decode（$ dataURL）;
$ filename ='newImage.png';
file_put_contents（'path / to /'。$ filename，$ image）;
您可能想要删除您的AJAX调用，因为现在不需要。 p>
I am trying to send the canvas image to the server.
Hi everyone I know this has been asked a lot. (I've already asked it once before)
The form data is sent too and this is used to name the file sent to the server so that it is identifiable who drew the image.
My site is here!
HTML
<form action="PHPtestupload.php" method="post">
Name <input type="text" name="name" value="" style="width:230px; margin-left: -160px; font-size:1em; "/>
Email <input type="email" name="email" value="" style="width:230px; margin-top: 12px; margin-left: -160px; font-size:1em; "/>
<input type="submit" onclick="postImagePlusForm();" value="Submit" style=" opacity:1; -webkit-appearance: none; width:100px; height:50px; margin-left: -50px;">
</form>
JS
// sends image to server
// serialize your canvas
var dataURL=document.getElementById('colors_sketch').toDataURL(image/png);
// serialize your form
var str = $("form").serializeArray();
// wrap both in an object
var package={ formData: str, imageDataURL: dataURL }
// ajax it
postImagePlusForm();
function postImagePlusForm(){
$.ajax({
type: "POST",
url: "PHPtestupload.php",
data: package,
success: function(value) {
// ...we have success!
}
});
}
PHP
if ( isset($_POST["imageDataURL"]) && !empty($_POST["imageDataURL"]) ) {
// create $dataURL
$dataURL = $_POST["imageDataURL"];
// Extract base64 data
// we have an unneeded header, zap it
$parts = explode(',', $dataURL);
$data = $parts[1];
// Decode
$data = base64_decode($data);
// Save
$fp = fopen('newImage.png', 'w');
fwrite($fp, $data);
fclose($fp);
if ( isset($_POST["formData"]) && !empty($_POST["formData"]) ) {
$formData = $_POST['formData'];
foreach ($formValue as $x) {
// do whatever you need to do with each form value ($x)
}
Alternative PHP using different Javascript on the web page, with semi-working site here!
I think that the server shuts down the PHP as it functions locally but doesn't work when online. It generates lots of error logs.
$data = file_get_contents('php://input');
$canvasImg = imagecreatefrompng($data);
$width = imagesx($canvasImg);
$height = imagesy($canvasImg);
$outImg = imagecreatetruecolor($width, $height);
$color = imagecolorallocatealpha($outImg, 255, 255, 255, 127);
imagefill($outImg, 0, 0, $color);
imagecopy($outImg, $canvasImg, 0, 0, 0, 0, $width, $height);
imagepng($outImg, 'test.png');
$name = $_POST['name'];
$email = $_POST['email'];
$target = 'test.png';
$newName = $name . $email;
rename($target, $newName);
解决方案
Try this:
$dataURL = $_POST["imageDataURL"];
$dataURL = str_replace('data:image/png;base64,', '', $dataURL);
$dataURL = str_replace(' ', '+', $dataURL);
$image = base64_decode($dataURL);
$filename = 'newImage.png';
file_put_contents('path/to/' . $filename, $image);
Also, in your Javascript you missed out the quotations in .toDataURL
var dataURL = document.getElementById('colors_sketch').toDataURL('image/png');
--- UPDATE ---
In your case, the image data is actually not being passed to your upload handler (PHPtestuplaod.php) since submitting the form will cause a page redirect. So a possible workaround on this will be:
HTML
<!-- add this inside your form.
this will be used to carry the image data into
the upload handler -->
<input type="hidden" name="imageData" id="imageData" />
jQuery
$("form").submit(function(e) {
// let's prevent the default behavior for now,
// so that we'll have time to include the image data
e.preventDefault();
// get the canvas image data
var imageData = document.getElementById("colors_sketch").toDataURL("image/png");
// let the hidden field we added earlier carry the image data into the upload handler
$("#imageData").val(imageData);
// submit the form
$(this).submit();
});
PHP
$dataURL = $_POST["imageData"];
$dataURL = str_replace('data:image/png;base64,', '', $dataURL);
$dataURL = str_replace(' ', '+', $dataURL);
$image = base64_decode($dataURL);
$filename = 'newImage.png';
file_put_contents('path/to/' . $filename, $image);
You may want to remove your AJAX call, since it won't be needed here now.
这篇关于将画布和表单发送到服务器使用自定义名称保存图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
