本文實例講述了PHP實現將HTML5中Canvas圖像保存到服務器的方法。分享給大家供大家參考。具體實現方法如下:
一、問題:
在幾年前HTML5還沒有流行的時候,我們的項目經理曾經向我提出這樣一個需求:讓項目評審專家們在評審結束時用筆在平板電腦上進行電子簽名。這需要我們評審軟件裡提供這樣一個功能:打開浏覽器,登錄,進入評審意見頁,頁面最下部有個方塊區域,用戶在這裡用觸摸筆進行簽名,然後這個簽名將會保持的服務器上。
這樣的一個需求在當時是讓我大費周折,但如今想起來,如果用html5的canvas實現,真是太簡單了。在《在HTML5 Canvas中放入圖片和保存為圖片的方法》這篇文章裡就實現了這一功能。
二、解決方法:
之前說了很多如何將canvas圖像保存成圖片並下載的方法,但這些方法都是將圖片保存到客戶端,而我們的簽名需求是需要將canvas的內容保存到服務器端,如何實現?
其實很簡單,看完下面的這段PHP代碼,相信你也會覺得很簡單。
復制代碼 代碼如下:<?php
// requires php5
define('UPLOAD_DIR', 'images/');
$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.';
?>
從網頁上傳到服務器端的圖片是base64_encode轉碼過的Data URL格式,數據在服務器端用base64_decode進行解碼,保存成文件。
或許有一天你也會需要用到它的,覺得很有用的話就收藏一下吧!
希望本文所述對大家的PHP程序設計有所幫助。