캔버스 요소를 php 및 ajax로 png 파일에 저장하는 방법은 무엇입니까?

Question

php 및 jquery ajax를 사용하여 html 캔버스 요소를 이미지로 저장하려고합니다. 아약스에 대한 제 코드는 다음과 같습니다. 난 그냥 PHP echo $_POST['front_image']에서 echo을하고 있어요

var front_image=canvas.toDataURL("image/png"); 
//front image is a base_64 string 
       $.ajax({ 
        url:base_url+'tabs/profile/save_front_image', 
        type:'POST', 
        data:'front_image='+front_image, 
        success:function(response){ 


        } 
       }); 

그렇게 요청과 응답은 동일합니다.

내가 그것을 브라우저

var w = window.open('about:blank', 'image from canvas'); 
    w.document.write("<img src='" + frame_image + "' alt='from canvas'/>"); 

의 새 탭에 이미지를로드 아약스 전에이 코드를 사용하는 경우 그러나 나는 아약스 응답에 동일한 코드를 넣을 때 작동하지 않습니다 울부 짖는 소리로. 브라우저에서는 빈 탭만 열립니다. 그래서 나는 파일로 이미지를 저장할 수 없다.

var w = window.open('about:blank', 'image from canvas'); 
w.document.write("<img src='" + response + "' alt='from canvas'/>"); 

는 또한 frame_image 및 response의 문자열 길이를 비교했다. 그들은 동일합니다. 왜 이미지가 응답으로로드되지 않는지 잘 모르겠습니다. 제게 대답 해주세요.

Answer 1

// soon you can use front_image=canvas.toBlob("image/png") 

// construct a blob 
function b64toBlob(b64Data, contentType, sliceSize) { 
    contentType = contentType || ''; 
    sliceSize = sliceSize || 512; 

    var byteCharacters = atob(b64Data); 
    var byteArrays = []; 

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { 
     var slice = byteCharacters.slice(offset, offset + sliceSize); 

     var byteNumbers = new Array(slice.length); 
     for (var i = 0; i < slice.length; i++) { 
      byteNumbers[i] = slice.charCodeAt(i); 
     } 

     var byteArray = new Uint8Array(byteNumbers); 

     byteArrays.push(byteArray); 
    } 

    var blob = new Blob(byteArrays, {type: contentType}); 
    return blob; 
} 

// make an actually file from the base64 so we can send binary data 
var blob = b64toBlob(front_image.split(",")[1], "image/png") 
var fd = new FormData(); 

fd.append("file", blob, "filename.png"); 

$.ajax({ 
    url: 'http://example.com/script.php', 
    data: fd, 
    processData: false, 
    contentType: false, 
    type: 'POST', 
    success: function(data){ 
     alert(data); 
    } 
}); 

// 구원의

<?php 
$uploads_dir = '/uploads'; 
foreach ($_FILES["file"]["error"] as $key => $error) { 
    if ($error == UPLOAD_ERR_OK) { 
     $tmp_name = $_FILES["file"]["tmp_name"][$key]; 
     $name = $_FILES["file"]["name"][$key]; 
     move_uploaded_file($tmp_name, "$uploads_dir/$name"); 
    } 
} 
?>