PHP中的HTML5應用 將Canvas圖像保存到服務器

        在幾年前HTML5尚未流行的時候，咱們的項目經理曾經向我提出這樣一個需求：讓項目評審專家們在評審結束時用筆在平板電腦上進行電子簽名。這須要咱們評審軟件裏提供這樣一個功能：打開瀏覽器，登陸，進入評審意見頁，頁面最下部有個方塊區域，用戶在這裏用觸摸筆進行簽名，而後這個簽名將會保持的服務器上。

        這樣的一個需求在當時是讓我大費周折，但現在想起來，若是用html5的canvas實現，真是太簡單了。在《將畫布(canvas)圖像保存成本地圖片的方法》這篇文章裏就有一個只用了幾行代碼就實現了的畫板功能——很簡單，雖然有一個小bug——但徹底能看成簽名用。

        我以前說了不少如何將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進行解碼，保存成文件。我在上篇文章中提到的那個火狐瀏覽器的微博圖文分享工具，在服務器端就是用到了這段代碼。

        有一天你也會須要用到它的，頗有用的代碼，收藏一下吧！