PHP implements saving Canvas images in HTML5 to the server

This article mainly introduces the method of PHP to save Canvas images in HTML5 to the server. It can realize the function of saving Canvas images to the server. It is a very practical skill. Friends who need it can refer to it

The example in this article describes how PHP implements saving Canvas images in HTML5 to the server. Share it with everyone for your reference. The specific implementation method is as follows:

1. Question:

When HTML5 was not popular a few years ago, our project manager once asked me such a requirement: Have the project review experts sign electronically with a pen on the tablet at the end of the review. This requires our review software to provide such a function: open the browser, log in, and enter the review opinion page. There is a square area at the bottom of the page where the user can sign with a touch pen, and then the signature will be saved on the server.

Such a requirement cost me a lot of trouble at the time, but now that I think about it, it would be so simple if it were implemented using HTML5 canvas. This function is implemented in the article "Methods to put pictures in HTML5 Canvas and save them as pictures".

2. Solution:

I have said many methods on how to save the canvas image as a picture and download it, but these methods are all about saving the picture to the client. , and our signature requirement is to save the contents of the canvas to the server. How to achieve this?

It’s actually very simple. After reading the PHP code below, I believe you will also find it very simple.

<?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;;
?>

The pictures uploaded from the web page to the server are in the Data URL format transcoded by base64_encode. The data is decoded using base64_decode on the server side and saved into files.

Perhaps you will need to use it one day. If you find it useful, just save it!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

PHP Example of getting the start date and end date of the first week of a certain year

##PHP Example explanation of the method to realize clockwise printing matrix (spiral matrix)

The above is the detailed content of PHP implements saving Canvas images in HTML5 to the server. For more information, please follow other related articles on the PHP Chinese website!