PHP實現(xiàn)將HTML5中Canvas圖像保存到服務(wù)器的方法
本文實例講述了PHP實現(xiàn)將HTML5中Canvas圖像保存到服務(wù)器的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
一、問題:
在幾年前HTML5還沒有流行的時候,我們的項目經(jīng)理曾經(jīng)向我提出這樣一個需求:讓項目評審專家們在評審結(jié)束時用筆在平板電腦上進(jìn)行電子簽名。這需要我們評審軟件里提供這樣一個功能:打開瀏覽器,登錄,進(jìn)入評審意見頁,頁面最下部有個方塊區(qū)域,用戶在這里用觸摸筆進(jìn)行簽名,然后這個簽名將會保持的服務(wù)器上。
這樣的一個需求在當(dāng)時是讓我大費周折,但如今想起來,如果用html5的canvas實現(xiàn),真是太簡單了。在《在HTML5 Canvas中放入圖片和保存為圖片的方法》這篇文章里就實現(xiàn)了這一功能。
二、解決方法:
之前說了很多如何將canvas圖像保存成圖片并下載的方法,但這些方法都是將圖片保存到客戶端,而我們的簽名需求是需要將canvas的內(nèi)容保存到服務(wù)器端,如何實現(xiàn)?
其實很簡單,看完下面的這段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.';
?>
從網(wǎng)頁上傳到服務(wù)器端的圖片是base64_encode轉(zhuǎn)碼過的Data URL格式,數(shù)據(jù)在服務(wù)器端用base64_decode進(jìn)行解碼,保存成文件。
或許有一天你也會需要用到它的,覺得很有用的話就收藏一下吧!
希望本文所述對大家的PHP程序設(shè)計有所幫助。
相關(guān)文章
PHP實現(xiàn)的基于單向鏈表解決約瑟夫環(huán)問題示例
這篇文章主要介紹了PHP實現(xiàn)的基于單向鏈表解決約瑟夫環(huán)問題,結(jié)合具體實例形式分析了php使用單鏈表解決約瑟夫環(huán)問題的算法原理與相關(guān)操作技巧,需要的朋友可以參考下2017-09-09PHP排序算法之歸并排序(Merging Sort)實例詳解
這篇文章主要介紹了PHP排序算法之歸并排序(Merging Sort),結(jié)合實例形式詳細(xì)分析了php歸并排序的原理、定義、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2018-04-04php ss7.5的數(shù)據(jù)調(diào)用 (筆記)
這里不再多說 這里只說 ss7.5的數(shù)據(jù)調(diào)用 不管是外部的 還是內(nèi)部的2010-03-03php 函數(shù)使用可變數(shù)量的參數(shù)方法
下面小編就為大家?guī)硪黄猵hp 函數(shù)使用可變數(shù)量的參數(shù)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05php5.3/5.4/5.5/5.6/7常見新增特性匯總整理
這篇文章主要介紹了php5.3/5.4/5.5/5.6/7常見新增特性,整理總結(jié)了php5.3/5.4/5.5/5.6/7各種常見的新增特性,包括各種語法、關(guān)鍵字、函數(shù)、擴(kuò)展等,需要的朋友可以參考下2020-02-02