相关疑难解决方法(0)

我正在进行一个生成艺术项目,我希望允许用户从算法中保存生成的图像.一般的想法是:

• 使用生成算法在HTML5 Canvas上创建图像
• 图像完成后,允许用户将画布作为图像文件保存到服务器
• 允许用户下载图像或将其添加到使用算法生成的图片库中.

但是,我坚持第二步.在谷歌的一些帮助下,我找到了这篇博文,这似乎正是我想要的:

这导致了JavaScript代码:

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var ajax = new XMLHttpRequest();

  ajax.open("POST", "testSave.php", false);
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.setRequestHeader("Content-Type", "application/upload");
  ajax.send("imgData=" + canvasData);
}

和相应的PHP(testSave.php):

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
  $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
  $filteredData = substr($imageData, strpos($imageData, ",") + 1);
  $unencodedData = base64_decode($filteredData);
  $fp = fopen('/path/to/file.png', 'wb');

  fwrite($fp, $unencodedData);
  fclose($fp);
}
?>

但这似乎根本没有做任何事情.

更多谷歌搜索出现了这篇基于上一个教程的博客文章.差别不大,但也许值得一试:

$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, …

我正在使用Nihilogic的"Canvas2Image"JavaScript工具将画布图转换为PNG图像.我现在需要的是使用PHP将这个工具生成的base64字符串转换为服务器上的实际PNG文件.

简而言之,我目前正在做的是使用Canvas2Image在客户端生成文件,然后检索base64编码的数据并使用AJAX将其发送到服务器:

// Generate the image file
var image = Canvas2Image.saveAsPNG(canvas, true);   

image.id = "canvasimage";
canvas.parentNode.replaceChild(image, canvas);

var url = 'hidden.php',
data = $('#canvasimage').attr('src');

$.ajax({ 
    type: "POST", 
    url: url,
    dataType: 'text',
    data: {
        base64data : data
    }
});

此时,"hidden.php"收到一个看起来像数据的数据块:image/png; base64,iVBORw0KGgoAAAANSUhEUgAABE ...

从现在开始,我非常难过.从我读过的内容来看,我认为我应该使用PHP的imagecreatefromstring函数,但我不确定如何从base64编码的字符串中实际创建一个实际的PNG图像并将其存储在我的服务器上.请帮助!

我想将画布保存为PNG,而不是在新窗口中将其作为base64编码的图像打开.

我用过这段代码:

jQuery("#btnPreview").click(function(){
        if (!fabric.Canvas.supports('toDataURL')) {
            alert('Sorry, your browser is not supported.');
        }
        else {
            canvas.deactivateAll();
            canvas.forEachObject(function(o){
                if(o.get("title") == "||Watermark||"){
                    canvas.bringToFront(o);
                }
            });
            window.open(canvas.toDataURL('png'), "");
            canvas.forEachObject(function(o){
                if(o.get("title") == "||Watermark||"){
                    canvas.sendToBack(o);
                }
            });
            canvas.renderAll();
        }

    });

我想使按钮将图像保存为PNG或JPG.

当我需要创建一个透明背景的图像时,我遇到了问题.我仍然不知道问题是使用fabricjs还是使用php.当我发送带有彩色背景的图像时,一切正常.发送带透明背景的图像时会出现问题.生成的图像使用黑色背景创建.所以,让我解释一下:当用户点击"保存"按钮时,我将画布的字符串表示发送到服务器端的php,以生成画布的图像.所以我使用follow函数通过Ajax发送画布的字符串表示形式(jQuery的POST函数):

    function sendStringRepresentation(){
        var strDataURI = canvas.toDataURL();
        strDataURI = strDataURI.substr(22, strDataURI.length);

        $.post("action/createImage.php",
        { 
            str: strDataURI
        },
        function(data){
            if(data == "OK"){
                $("#msg").html("Image created.");
        }
        else{
            $("#msg").html("Image not created.");
            }
        });
    }

在PHP文件中我使用以下代码生成图像:

    // createImage.php

    $data = base64_decode($_POST["str"]);

    $urlUploadImages = "../uploads/img/";
    $nameImage = "test.png";

    $img = imagecreatefromstring($data);

    if($img) {
        imagepng($img, $urlUploadImages.$nameImage, 0);
        imagedestroy($img);

        // [database code]

        echo "OK";
    }
    else {
        echo 'ERROR';
    }

同样,问题只在于背景透明画布.彩色背景一切正常.