PHP實現將HTML5中Canvas映像儲存到伺服器的方法_PHP

來源:互聯網
上載者:User
關鍵字 PHP HTML5 Canvas 映像 儲存
本文執行個體講述了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程式設計有所協助。

  • 相關文章

    聯繫我們

    該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.