Html uploads image data to the server, and php receives and saves images

: This article mainly introduces how to upload html image data to the server. php receives and saves images. if you are interested in PHP tutorials, refer to it.

In many cases, we need to save the image data on the web or the image in the canvas to the server. Html5 provides available interfaces.

The toDataURL method of Canvas. you can export the canvas data on the Canvas to the string format. We only need to transmit the string to the server.

What if the image is an img tag?

Canvas provides the drawImage method to draw img or other canvas data to your canvas.

Next, let's look at the client code:

var cc = window.document.getElementById("egretCanvas");var cc2 = document.createElement("canvas");cc2.setAttribute("width", "320");cc2.setAttribute("height", "514");var ctx = cc2.getContext("2d");ctx.drawImage(cc, 0, 0, 320, 514);

var imgdata: string = cc2["toDataURL"]();

The exported string contains the prefix "data: image/png; base64,". Therefore, we need to remove this prefix.

imgdata = imgdata.substring(22); 

Then pass the string to the server. here we choose to use php to receive data and save the image.

$imgurl = str_replace(' ', '+', $_REQUEST['image']);

Replace the spaces in the string with the "+" sign.

$savePath = "../images/123.png";$image = base64_decode($image);file_put_contents($savePath,$image);

After receiving the data, php needs to perform base64 decoding to save it as an image.

The preceding section describes how to upload image data to the server in html. php receives and saves images, including some content, and hopes to help users who are interested in PHP tutorials.