Canvas 的 ToDataURL (JavaScript) 在通过 PHP 上传到服务器后创建损坏的 PNG 文件

Question

我试图在 JSFiddle 上给出我的代码的工作示例，但我只能将图像的数据URL 用于输入。（JS Fiddle：http://jsfiddle.net/dyt943s0/38/。）（编辑：我能够制作一个 link 将您发送到数据 URL 图像。）

这是损坏图像的副本，（如果您尝试在 photoshop 中打开，它将无法正常工作，并给出错误："Could not complete your request because the file-format module cannot parse the file"）：

或查看 http://mcgroup.freshfocuscrm.com/img/phot.png 以获取原始照片的副本。

这是我的 JavaScript 代码（因为它在我的实际网页上）：

var img=new Image();
    img.crossOrigin='anonymous';
    img.onload=start;
    img.src="../../ffm.freshfocuscrm.com/Driving Log/tmp/background-lines.png";
function start(){

  var bottleCanvas = document.getElementById('bottleCanvas');
 // var designCanvas = $("#chartContainer .canvasjs-chart-canvas").get(0);
  var ctxb=bottleCanvas.getContext('2d');
  //var ctxd=editorCanvas.getContext('2d');

  ctxb.drawImage(img,0,0);
  //ctxd.fillRect(5,5,5,5);

  downloadCanvas();
}

function downloadCanvas() {
  var bottleCanvas = document.getElementById('bottleCanvas');
  var designCanvas = $("#chartContainer .canvasjs-chart-canvas").get(0);

  var bottleContext = bottleCanvas.getContext('2d');
  bottleContext.drawImage(designCanvas, 0, 0);

  var dataURL = bottleCanvas.toDataURL("image/png");
  console.log(dataURL);
  $(".dataurl").val(dataURL);
  $(".submit-create-pdf").click();


}

然后是我的 PHP 将图像下载到我的服务器的代码：

$img = $_POST['dataurl_image'];
        $img = str_replace('data:image/png;base64,', '', $img);
        $img = str_replace(' ', '+', $img);
        $fileData = base64_decode($img);
        //saving
        $fileName = 'photos.png';
        file_put_contents(WEBSITE_URL.'/Driving Log/tmp/'.$fileName, $fileData);

但是，我几乎可以肯定这是由于 PHP 错误造成的，因为如果我将数据 URL 代码直接放入我的 URL 栏中，并保存图像手动，我可以在 PhotoShop 中打开它。我似乎无法弄清楚那个错误是什么。

一些附加信息：

图像似乎创建正确，例如，我可以在 Windows 照片查看器中打开它，我可以在我的网站上的标签中显示它。
如果我在 MS Paint 中打开并保存图像，则图像不会损坏。
我也试过使用下面的PHP代码来创建图像，但也不起作用：

$image_url = $_POST['dataurl_image']; $image = @file_get_contents($image_url); $文件名 = 'uniqqid.png'; file_put_contents(WEBSITE_URL.'/驱动Log/tmp/'.$filename, $image);
当我使用以下 JS 代码（而不是上面的代码）时图像未损坏：

var canvas = $("#chartContainer .canvasjs-chart-canvas").get(0); 变量数据URL = canvas.toDataURL('image/png'); console.log(数据URL); $("#btn-download").attr("href", dataURL); $(".dataurl").val(数据URL);

此外，请注意：我正在我的 Localhost Wamp 服务器上尝试所有这些代码，是否有影响？

谢谢！

Answer 1

这是由于 Google Chrome 限制输入 (type=text) 标签内允许的字符数引起的。我的 DataURL 代码接近 600,000 个字符，但输入的代码被截断了少于这个数字，这导致我的图像损坏。

为了解决这个问题，我进入我的 JS 代码并尝试缩短 DataURL 代码。

所以，而不是：

var dataURL = bottleCanvas.toDataURL("image/png");

我用过：

var dataURL = bottleCanvas.toDataURL("image/jpeg", 0.5);

并将字符数缩减到不到 100,000。

这允许完整的 DataURL 代码通过我的 PHP 服务器，然后允许我创建一个未损坏的图像。

Canvas 的 ToDataURL (JavaScript) 在通过 PHP 上传到服务器后创建损坏的 PNG 文件

ToDataURL (JavaScript) of Canvas is Creating a Corrupt PNG File After Upload to Server Thru PHP

javascript

php

jquery

png

canvas