在服务器端保存画布图像时,从base64数据字符串生成空白图像
when saving canvas image server-side, from a base64 data string,it produce blank image
我在PHP中保存画布图像有问题。我得到一个空白的.png
文件。我搜索了很多关于这个问题,但找不到任何有用的东西。为什么它保存一个空白的图像,而不是渲染真实的图像?
JavaScript代码:
html2canvas([document.getElementById('dadycool')], {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var image = new Image();
image.src = data;
document.getElementById('imagec').appendChild(image);
console.log(data);
$.ajax({
type: "POST",
url: "up.php",
data: {
imgBase64: data
}
}).done(function(o) {
console.log('saved');
});
}
PHP代码:
<?php
// requires php5
define('localhost/samp/sample2/uploads', 'images/');
$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = localhost/samp/sample2/uploads . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>
我怀疑您没有配置您的开发框来显示PHP错误消息。您正在定义一个不是有效标识符的常量:
define('localhost/samp/sample2/uploads', 'images/');
这意味着你不能直接使用它:
$file = localhost/samp/sample2/uploads . uniqid() . '.png';
…应该触发:
Notice: Use of undefined constant localhost - assumed 'localhost'
Notice: Use of undefined constant samp - assumed 'samp'
Warning: Division by zero
Notice: Use of undefined constant sample2
Warning: Division by zero
Notice: Use of undefined constant uploads - assumed 'uploads'
Warning: Division by zero
…file
将只包含基文件名(例如53676a01cdb59.png
),而不包含路径组件。您需要使用以下语法:
$file = constant('localhost/samp/sample2/uploads') . uniqid() . '.png';
…或者,更好的是,给常量起一个合理的名字:
define('DIR_UPLOADS', 'images/');
我有同样的问题-它看起来像base64数据被正确发送,但总是无法生成图像服务器端。我发现的解决方案是使用'FormData'对象和一个非常简单的xhr请求发布到服务器。
var url='/path/to/save.php';
var data=oCanvas.toDataURL('image/png').replace(/^data:image'/(png|jpg);base64,/, '');
var fd=new FormData();
fd.append('imgdata',data);
var request = new XMLHttpRequest();
request.open('POST', url);
request.send(fd);
我99%肯定这个问题是由xhr请求发送的不正确的Content-Type报头引起的。将基本的xhr请求与FormData结合使用,将强制xhr请求与具有正确定义内容边界的multipart/FormData内容类型一起发送。
相关文章:
- Html页面上的多个Base64图像和平滑加载
- 如何使用jquery将base64图像路径转换为真实路径
- 无法在Cordova 4.0 ios中将jpg/jpeg图像转换为Base64
- base64编码的图像比intranet中的常规图像好吗
- 如何用javascript下载画布图像(base64)
- Cordova图像选取器转换为base64
- 从Base64 Ionic编码和解码图像
- 显示生成的gif;base64图像使用C#代码隐藏在img中使用JavaScript
- 如何在fabricjs中嵌入图像base64将画布转换为SVG
- 一个javascript实现base64图像编码并将结果写入文本文件
- base64图像未显示
- 我用base64对图像进行了正确编码吗
- 如何使用JavaScript将Base64图像更改为常规图像
- 如何使用Java解码由window.btoa编码的base64图像
- 使用 base64 预加载图像
- 从 Base64 转换图像时出错 - HTMLImageElement 已损坏
- 将图像 base64 转换为 base30
- 解码图像Base64字符串无效
- 我无法在iPhone上通过phonegap显示编码图像(Base64)
- Phonegap编码图像base64