html5 canvas toDataURL返回空白图像

Question

从空白画布开始：

<canvas id='myCanvas' width='800' height='600'></canvas>

然后初始化该画布：

  function init_canvas(){
    var canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d');
    context.lineCap = 'round';
    // fill it with white background
    context.save();
    context.fillStyle = '#fff';
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.restore();
    return;
  }

然后在画布上做一堆绘图。

然后尝试使用后端的ajax和PHP将其保存到服务器。

在客户端：

var img = canvas.toDataURL('image/png');
// strip the leading garbage.
img.substr(img.indexOf(',')+1).toString();

将生成的字符串（base64编码的png）直接输入到PHP和base64_decode（）字符串...图像总是正确的大小，但它没有任何绘图 - 只是一个透明的图像。 这似乎不是PHP中的base64_decode（）的问题，它似乎是一个安全的事情。 Firefox 4和最新的Chrome都失败了。

使用“image / png”标头将生成的png图像转储到firefox会在错误控制台中生成：

Error: Image corrupt or truncated: http://somewhere.com/showimage.php
Source file: http://somewhere.com/showimage.php

但是......除非toDataURL（）在任何地方都被破坏，否则图像不会被破坏或被截断，因为php的东西只是base64_decode（）toDataURL（）的结果。

有任何想法吗？

谢谢！

Answer 1

你有没有在base64_decode的PHP文档中看到这个评论 ？

如果要保存从Javascript canvas.toDataURL（）函数派生的数据，则必须将空格转换为加号。 如果不这样做，解码数据将被破坏：

 <?php $encodedData = str_replace(' ','+',$encodedData); $decocedData = base64_decode($encodedData); ?> 

Answer 2

这工作正常，没有返回空白图像。

saveImage.php

 <?php 
        $result = array();  
        $encodedData = explode("," , $_POST['imgData'])[1];
        $encodedData = str_replace(' ','+',$encodedData);
        $decocedData = base64_decode($encodedData); 
        //Location to where you want to save image
        $NewFileName = './photos/'.$_POST['imgName'].'.jpg';
        file_put_contents($NewFileName,$decocedData);
        $result['status'] = 1;
        $result['saveImage'] = $NewFileName;
        echo json_encode($result);
    ?>

的script.js

<script>
//This post the data to server on fly

function saveImage(canvasData,FileName) {
  var xmlHttpReq = false;

  if (window.XMLHttpRequest) {
    ajax = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }

  ajax.open("POST", "saveImage.php", false);
  ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  ajax.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {
        var rawArr = JSON.parse(this.responseText);
        var ImagePreviewer= document.getElementById("ImagePreviewer");
    ImagePreviewer.src=rawArr.saveImage;
    //console.log(rawArr.saveImage);
    }

  }
  ajax.send("imgData=" + canvasData+"&imgName=" + FileName);
}
// Call this with button click or whatever you want 
function saveJPG(filename) {
//do other logic here
var dataURL = TheCanvas.toDataURL("image/jpg");
    saveImage(dataURL,filename);
}
<script>

Answer 3

它之前是我的问题吗？

也许你可以查看

jQuery和Canvas.toDataURL

和

使用Canvas.toDataURL在Firefox上安全性错误“code：”1000

Answer 4

在JavaScript中，在支持此方法的浏览器上发送canvas.toDataURL()的结果，默认类型为“image / png”。

var imageInfo = canvas.toDataURL();

直接创建png文件的方法：

<?php
$imageInfo = imageInfoFromBrowser(); // Your method to get the data
$image = fopen($imageInfo, 'r');
file_put_contents("fileName.png", $image);
fclose($image);
?>

我有这个在PHP 5.3中工作，对于其他版本，请检查。

用于在PHP上测试的图像数据样本。

$imageDataInfoSample = "data:image/png;base64,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"