Question

我正在尝试使用ajax从画布上传到服务器，但每次我似乎都得到一个879字节的空图像文件。我不确定我哪里出错了。如果有人能看一眼就会非常感激。

document.getElementById('input').addEventListener("change",function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  var output = document.getElementById('test');
  reader.onload = function () {
    var data = this.result;
    var img = new Image();
    img.src = data;
    img.onload = function() {
var ctx = canvas.getContext("2d");
output.innerHTML = 'width: ' + img.width + '\n' + 'height: ' + img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);

    };
  };
  reader.readAsDataURL(file);
  var canvasData = canvas.toDataURL("image/png");

下面的Ajax

$。AJAX（{ 键入：＆＃34; POST＆＃34;， url：＆＃34; upload_images.php＆＃34;， data：{canvasData：canvasData}，成功：function（）{ } }）;

$upload_dir = 'uploads/';  //implement this function yourself
$img = $_POST['canvasData'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);
header('Location: '.$_POST['return_url']);

Answer 1

很棒，全都解决了...... 在你的评论之后，我在卸载以及ajax上传中移动了toDataUrl并且一切都很好。再次感谢。

试图保存画布数据，文件最终为空

1 个答案: