Сохранить холст как изображение PaperJS

Я создал холст с изображением и несколькими фигурами поверх изображения. Теперь мне нужно сохранить весь холст как изображение, когда я нажимаю кнопку «Сохранить». как мне это сделать. Может кто-нибудь помочь мне.

Я сделал, как вы сказали, но это не работает, вот мой код. Вы можете проверить, все ли я включил.

<canvas id="canvas" resize></canvas>

Файл Javascript, который я включил,

<script src="lib/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/paper.js"></script>

А вот код:

<script>
var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
    $(document).ready(function(){
        $(".save").click(function(){
            $.ajax({
                type: "POST",
                url: "savepic.php",
                data: {image: dataURL}
            }).done(function(respond){
                console.log(respond);
            });
        });
    });
</script>

javascript html5-canvas paperjs
person chiyango    schedule 06.06.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Сохраните холст в URL-адрес изображения и загрузите его на сервер PHP

Вы можете сохранить свой холст по URL-адресу изображения, подобному этому (по умолчанию формат .png):

canvas.toDataURL();

Вот как разместить этот dataURL на сервере.

Сторона клиента:

// create a dataUrl from the canvas
var dataURL= canvas.toDataURL();

// use jQuery to POST the dataUrl to you php server
$.ajax({
    type: "POST",
    url: "upload.php",
    data: {image: dataURL}
}).done(function( respond ) {
    // Done...report success or failure
    // You will get back the temp file name
    // or "Unable to save this image."
    console.log(respond);
});

Файл сервера: upload.php

<?php

// make sure the image-data exists and is not empty
// xampp is particularly sensitive to empty image-data 
if ( isset($_POST["image"]) && !empty($_POST["image"]) ) {    

    // get the dataURL
    $dataURL = $_POST["image"];  

    // the dataURL has a prefix (mimetype+datatype) 
    // that we don't want, so strip that prefix off
    $parts = explode(',', $dataURL);  
    $data = $parts[1];  

    // Decode base64 data, resulting in an image
    $data = base64_decode($data);  

    // create a temporary unique file name
    $file = UPLOAD_DIR . uniqid() . '.png';

    // write the file to the upload directory
    $success = file_put_contents($file, $data);

    // return the temp file name (success)
    // or return an error message just to frustrate the user (kidding!)
    print $success ? $file : 'Unable to save this image.';

}

Некоторые обычные ошибки (обратите внимание, что xampp особенно чувствителен к этим ошибкам):

  • Убедитесь, что dataURL не пуст (вы можете даже проверить это на стороне клиента — не показано).
  • Убедитесь, что у вас включена загрузка файлов на сервер.
  • Убедитесь, что вы установили адекватный лимит размера загружаемого файла на сервер.
  • Убедитесь, что вы правильно определили каталог загрузки.
  • Убедитесь, что у вас правильно установлены разрешения для каталога загрузки.

...И будьте терпеливы. Возможно, вам придется возиться с сервером, чтобы запустить его.

person markE    schedule 06.06.2013
comment
@markE .. Когда я нажимаю «Сохранить», он должен сохраняться на сервере, а не в локальной системе. Когда я гуглил, немногие сказали отправить с почтой. Как я могу отправить это почтовым методом, будет ли оно действовать как изображение. Можете ли вы опубликовать образец здесь. - person chiyango; 07.06.2013
comment
Конечно, какой веб-сервер вы используете? - person markE; 07.06.2013
comment
Windows Xampp — веб-сервер Apache - person chiyango; 07.06.2013
comment
Посмотрите мой отредактированный ответ для кода клиент + сервер, чтобы опубликовать и сохранить свой холст в виде изображения на вашем php-сервере. - person markE; 07.06.2013
comment
@markE.. Я сделал что-то не так, это не работает, я отредактировал выше, не могли бы вы проверить это. - person chiyango; 07.06.2013
comment
Uncaught TypeError: невозможно вызвать метод toDataURL со значением null Вот что я получаю - person chiyango; 07.06.2013