ホームページ > 記事 > バックエンド開発 > PHP は、HTML5 の Canvas 画像をサーバーに保存する機能を実装します。

PHP は、HTML5 の Canvas 画像をサーバーに保存する機能を実装します。

不言オリジナル: 2018-07-03 09:41:461733ブラウズ

この記事では主にPHPでHTML5のCanvas画像をサーバーに保存する方法を紹介します.Canvas画像をサーバーに保存する機能を実現できます.非常に実践的なスキルです.必要な友人は参考にしてください

この記事の例では、PHP が HTML5 の Canvas イメージをサーバーに保存する方法を実装します。皆さんの参考に共有してください。具体的な実装方法は次のとおりです。

1. 質問:

数年前、HTML5 が普及していなかった頃、弊社のプロジェクトマネージャーから次のような要望を聞いたことがあります。プロジェクトレビューの専門家に、レビューの最後にタブレット上のペンで電子署名してもらいます。そのためには、ブラウザを開いてログインし、レビュー意見ページにアクセスし、ページ下部にタッチペンで署名できる四角いエリアがあり、そこに署名を行うという機能をレビューソフトウェアに提供する必要があります。サーバーに保存されます。

このような要件は、当時は非常に苦労しましたが、今考えてみると、HTML5 キャンバスを使用して実装できれば非常に簡単です。この機能は「HTML5 Canvasに画像を配置して画像として保存する方法」の記事で実装されています。

2. 解決策:

キャンバス画像を画像として保存してダウンロードする方法についてはたくさん説明しましたが、これらの方法はすべて画像の保存に関するものです。署名要件は、キャンバスの内容をサーバーに保存することです。これを実現するにはどうすればよいでしょうか?

実際は非常にシンプルですが、以下の PHP コードを読んでいただければ、非常にシンプルであることがお分かりいただけると思います。

<?php
 // requires php5
 define(&#39;UPLOAD_DIR&#39;, &#39;images/&#39;);
 $img = $_POST[&#39;img&#39;];
 $img = str_replace(&#39;data:image/png;base64,&#39;, &#39;&#39;, $img);
 $img = str_replace(&#39; &#39;, &#39;+&#39;, $img);
 $data = base64_decode($img);
 $file = UPLOAD_DIR . uniqid() . &#39;.png&#39;;
 $success = file_put_contents($file, $data);
 print $success ? $file : &#39;Unable to save the file.&#39;;
?>

Webページからサーバーにアップロードされた画像はbase64_encodeでトランスコードされたデータURL形式となっており、サーバー側でbase64_decodeでデコードされてファイルに保存されます。

もしかしたら、いつか使う必要があるかもしれません。便利だと思ったら保存してください。

上記がこの記事の全内容です。皆様の学習に少しでもお役に立てれば幸いです。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

PHP は、HTML5 の Canvas 画像をサーバーに保存する機能を実装します。

関連記事