如何通过 php 脚本将画布保存为 localhost 中的 png，并将图像加载到画布中？答案

【问题标题】：How to save canvas as a png in localhost via a php script with the images loaded into the canvas?如何通过 php 脚本将画布保存为 localhost 中的 png，并将图像加载到画布中？
【发布时间】：2015-08-23 20:46:15
【问题描述】：

我使用以下函数将图像添加到画布。我使用了 fabric.js 来做到这一点。

 document.getElementById('imgLoader').onchange = function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) { console.log('fdsf');
        var imgObj = new Image();
        imgObj.src = event.target.result;


        imgObj.onload = function () {
            // start fabricJS stuff

            var image = new fabric.Image(imgObj);
            image.set({
                left: 250,
                top: 250,
                angle: 0,
                padding: 10,
                cornersize: 1
            });
            //image.scale(getRandomNum(0.1, 0.25)).setCoords();
            c.add(image);
            //context.drawImage(imgObj, 100, 100);

            // end fabricJS stuff
        }

    }
    reader.readAsDataURL(e.target.files[0]);
}

通过使用上述功能，我可以成功地将图像添加到画布。但我的问题是当我尝试将画布另存为图像时，它会给出一个空白图像。我使用下面的代码将画布转换为图像。

var canvas = document.getElementById('c');  //Id of the canvas
var dataURL = canvas.toDataURL();    
$('#saveMe').click(function() {    
         $.ajax({
                type: "POST",
                url: "myscript.php",
                data: {
                    img: dataURL
                }
            }).done(function(o) {
                console.log('saved');

            });

myscript.php 如下。

define('UPLOAD_DIR', 'C:/xampp/htdocs/pic/');
chmod(UPLOAD_DIR, 777);
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';

即使我在画布中添加了图像，但在保存时，我只得到空白画布，没有得到我加载到画布中的图像。请帮助我。提前致谢。

【问题讨论】：

你应该在你的点击函数中调用canvas.toDataURL()，这里看起来你是在加载页面时调用它。显然，您的画布仍然是白色的。

标签： javascript php html canvas

【解决方案1】：

使用fileSaver.js，非常方便。您还可以在此处查看演示 http://eligrey.com/demos/FileSaver.js/

实施

    $(function () {
        $("#btnSave").click(function () {
            html2canvas($("#widget"), {
                onrendered: function (canvas) {
                    canvas.toBlob(function (blob) {
                        saveAs(blob, "Dashboard.png");
                    });
                }
            });
        });
    });

【讨论】：

#widget是画布的id吗？而canvas和canvas是什么？
yes 'widget' 是您要转换为图像的容器 div 的 id，您可以忽略 'theCanvas' 行，这是我的个人项目。为您编辑了答案。
我不想下载文件。我想将它保存在本地主机中。但是您的代码，只需下载图像
好吧，您的问题是“如何保存”，但您仍然可以更改 saveAs(blob, "Dashboard.png");满足您的要求。