如何通過php腳本將畫布保存爲localhost中的png並將圖像加載到畫布中？

我使用下面的函數將圖像添加到畫布。我用fabric.js來做到這一點。如何通過php腳本將畫布保存爲localhost中的png並將圖像加載到畫布中？

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.';

即使我添加圖片到畫布上，保存時，我得到的只是空白的畫布，沒有得到我已加載到畫布圖像。請幫助我。提前感謝。

來源

2015-08-23 Tharu

你應該叫'canvas.toDataURL（）'在點擊的功能，在這裏似乎你調用它，而加載頁面。顯然，你的畫布仍然是白色的。 – Kaiido

使用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"); 
        }); 
       } 
      }); 
     }); 
    });

來源

2015-08-23 10:09:14 sajanyamaha

是#widget是畫布的ID嗎？什麼是帆布和帆布？ – Tharu

yes'widget'是您想要轉換爲圖像的容器div的ID，您可以忽略'theCanvas'這一行，這是我個人的項目。爲您編輯答案。 – sajanyamaha

我不想下載該文件。我想將其保存在本地主機中。但你的代碼，只需下載圖片 – Tharu

如何通過php腳本將畫布保存爲localhost中的png並將圖像加載到畫布中？

回答

相關問題