將canvas轉存為在伺服器端的圖片檔案

#php

#canvas繪圖保存

#file_put_contents

#toDataURL()

web程式設計課的期末專案中，做了一個上傳塗鴉作品的網站。

所以用到了JavaScript的canvas功能。

可以在網頁上作畫之後，下一個功能是：

*讓使用者能夠點選"發佈"然後發表作品。

這邊要解決的困難是，如何將canvas的圖不「讓使用者按另存新檔，保存在自己的電腦裡，再上傳」，

而是按下button後，將圖直接保存在網站的伺服器端。

這邊便使用到JavaScript中的toDataURL()以及php中的file_put_contents兩個函式。

 

首先在html原始碼建置中，放一個button，點選後執行saveSign()函式

然後有一個隱藏的物件，要將Value塞入東西送到後端。

<button  onclick="saveSign();return false;">

<input type="hidden" id="img" value="">

接著是在JavaScript中，saveSign要做的事情：toDateURL()

<script>

    var mycanvas = document.getElementById("myCanvas"); // 取得物件

    function saveSign(){

    var canvasData = mycanvas.toDataURL("image/png");

    var drawElement = document.getElementById('img');

    drawElement.value = canvasData;

    alert("已保存");

    }

</script>

*首先，什麼是Data URI？是一種協議。

過往要在HTML中放入圖片，是利用<img src="" >在src中填上路徑，而圖片存放在某個資料夾中，即引用外部資源。

但DataURI協議中，將圖片變為base64編碼的字符串，便可以直接放入HTML當中。

而toDataURL()便是用於將canvas物件轉換為base64位編碼；

toDataURL括弧中放入型別(MIME類型)，如：image/png、image/jpeg、image/png等；

在這邊，我將轉換出來的字符丟入某一個物件的value裡，方便我將這串字符送到php當中。

這串字符送到php後，首先要去掉  data:image/png;base64,

接著使用base64_decode()來解碼。

再使用file_put_contents($file, $data)

$img = $_POST['img']; 

$img = str_replace('data:image/png;base64,', '', $img);

$data = base64_decode($img);

file_put_contents('/tmp/image.png', $data);

*為什麼要去掉 data:image/png;base64 呢？

因為這一串是格式規範，後面的才是圖片的編碼。

*file_put_contents($file, $data)的作用是將資料寫入檔案中。

第一個引數是檔案，第二個是資料。如果沒有這個檔案，則會自行創建。

所以這個用法就是說，

我們將圖片的data寫入一個檔案當中，因為沒有這個檔案，所以會創建一個，就變成了一個圖片的檔案。