html上傳圖片資料到伺服器,php接收保存圖片

很多時候，我們需要把web端的圖片資料或是canvas裡面的畫面存到伺服器上。 html5已經提供了可用的介面。

Canvas的toDataURL方法，可以將canvas上的畫布資料匯出成字串格式。我們只需要再把字串傳輸給伺服器就可以了。

如果圖片是img標籤的，怎麼辦呢？

很簡單，canvas提供了drawImage方法，用於把img或其他canvas的資料畫到自己的畫布上。

下面，我們來看看客戶端的程式碼：

var cc = window.document.getElementById("egretCanvas");
var cc2 = document.createElement("canvas");
cc2.setAttribute("width", "320");
cc2.setAttribute("height", "514");
var ctx = cc2.getContext("2d");
ctx.drawImage(cc, 0, 0, 320, 514);

var imgdata: string = cc2["toDataURL"]();

這樣導出的字串，含有前綴“data:image/png;base64,”，所以我們需要把這個前綴去掉

imgdata = imgdata.substring(22); 

然後把字串傳給伺服器，這裡我們選擇使用php語言來接收資料並保存圖片。

$imgurl = str_replace(' ', '+', $_REQUEST['image']);

先把字串中的空格替換成"+"號。

$savePath = "../images/123.png";
$image = base64_decode($image);
file_put_contents($savePath,$image);

php拿到資料後，需要進行base64解碼，才能儲存成圖片。

以上就介紹了html上傳圖片資料到伺服器,php接收保存圖片，包含了方面的內容，希望對PHP教學有興趣的朋友有幫助。