Question

我使用以下函数将图像添加到画布。我用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.';

即使我在画布中添加了图像，在保存时，我只得到空白画布，而不是将我加载到画布中的图像。请帮帮我。谢谢。

Answer 1

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

实施

SELECT '<a href="http://intranet' + CAST(DepartmentID as VARCHAR) + '">The link name</a>' as Dept

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

1 个答案: