保存到服务器的图像显示空白

时间:2014-03-20 12:23:51

标签: jquery html5-canvas fabricjs

我正在尝试将画布作为图像保存到我的服务器上,我已经完成了这个并且脚本保存了一个jpeg文件并且文件有一个大小(因此有些内容),但是当我查看它时,它显示作为一个没有图片的黑色背景,有没有人知道我做错了什么?

document.getElementById('rasterize').onclick = function (){     
            var image = canvas.toDataURL();                     
            var xmlHttpReq = false;       
            if (window.XMLHttpRequest) {
                ajax = new XMLHttpRequest();
            }

            else if (window.ActiveXObject) {
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            }
           ajax.open('POST', 'save3.php', false);
           ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
           ajax.onreadystatechange = function() {
                console.log(ajax.responseText);
            }
           ajax.send("imgData="+image);

        }; 

PHP

  <?php

define('UPLOAD_DIR', 'images/');
$data = $_POST['imgData'];

$file = UPLOAD_DIR . uniqid() . '.jpeg';

$uri =  substr($data,strpos($data,",")+1);

file_put_contents($file, base64_decode($uri));

echo $file;
?>

1 个答案:

答案 0 :(得分:0)

toDataURL()的默认格式为image / png。如果您的php脚本需要jpg图像,则需要使用toDataUrl('image/jpeg', 0.8)指定它,其中0.8是您的图像质量。

var image = canvas.toDataURL(); //outputs png

VS

var image = canvas.toDataURL('image/jpeg', 0.8); //outputs jpeg