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