Как сохранить холст как png в localhost через php-скрипт с изображениями, загруженными в холст?

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/

Реализация

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