PHP "How to save a canvas image to a cost-effective image"

Source: Internet
Author: User

How to save a canvas image on a Web page to the server using PHPJune 27, 2014 Crooked Neck Hacker released a reply
    • 8

When HTML5 was not popular a few years ago, our project manager asked me to ask the project review experts to use a pen to electronically sign the tablet at the end of the review. This requires our review software to provide such a function: Open the browser, login, enter the review comments page, the bottom of the page has a block area, the user here with a touch pen signature, and then this signature will remain on the server.

Such a demand at the time was to make me a lot of trouble, but now think of it, if it is done with HTML5 canvas, it is too simple. In the "How to save a canvas image for a cost-effective picture" This article has an artboard function that has been implemented with just a few lines of code-very simple, although there is a small bug--but it can be used as a signature.

I told you a lot about how to save a canvas image as a picture and download it, but all of these methods are saved to the client, and our signature requirement is that we need to save the canvas's content to the server side.

Actually very simple, after reading the following PHP code, I believe you will feel very simple.

<? phpRequires PHP5Define(' 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 (; $success = file_put_contents  ( $file  $data ; Print  $success  $file  ' unable to save the File. ' ?>             

Uploaded from the Web page to the server side of the image is the base64_encode transcoding data URL format, the server side of the database is decoded by Base64_decode, saved as a file. The Firefox Twitter-sharing tool I mentioned in my previous article uses this code on the server side.

One day you will also need to use it, very useful code, collect it!

PHP "How to save a canvas image to a cost-effective image"

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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.