캔버스를 이미지로 저장 PaperJS

Question

이미지 위에 캔버스와 이미지가없는 캔버스를 만들었습니다. 이제 저장 단추를 클릭하면 전체 캔버스를 이미지로 저장해야합니다. 내가 어떻게 해. 어느 누구도 나를 도와 줄 수 없다.

나는 당신이 말한대로했으나 여기서 작동하지 않는 것은 제 코드입니다. 내가 모든 것을 포함했는지 확인할 수 있니? 내가 포함했다

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

자바 스크립트 파일은

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

입니다 그리고 여기에 코드입니다 : 이미지 URL에

<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> 

Answer 1

저장 캔버스와 PHP 서버에 업로드

캔버스를 다음과 같은 이미지 URL에 저장할 수 있습니다 (de 오류는 .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); 
}); 

서버 파일이 :

<?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이 개는에 특히 민감주의) upload.php로 :

• 것이 확인 dataURL은 비어 있지 않습니다 (이 클라이언트 측을 검사 할 수도 있습니다 - 표시되지 않음).
• 서버에서 파일 업로드를 사용하도록 설정했는지 확인하십시오.
• 서버에 적절한 파일 업로드 크기 제한을 정의했는지 확인하십시오.
• 업로드 디렉토리를 올바르게 정의했는지 확인하십시오.
• 업로드 디렉토리에 권한이 올바르게 설정되어 있는지 확인하십시오.

... 그리고 기다려주십시오. 실행하려면 서버를 조작해야 할 수도 있습니다.