because you want to add a watermark to the image, you plan to use Canvas at the front end to draw the watermarked image onto the image selected by the user, and then send the processed image to the PHP"s Apache server.

the result can be saved as a picture, but the effect of the picture is not as expected.

front end previews the Base64-encoded image to achieve the desired effect before sending the data to the server.

expected effect

this actual effect is my screenshot. The saved image can be previewed on the computer, but the uploaded image in the forum cannot be previewed properly

the Base64 string transferred by the picture is saved at the front and back end respectively.
found that the string sent by the front end is different from the string received by the back end.

so I wrote a function to print out the difference, mainly concentrated in the following locations:

str1---OkablOxV5i
str2---Okabl0XV5i
str1---kablOxV5iE
str2---kabl0XV5iE
str1---If3RqOxaDJ
str2---If3Rq0xaDJ
str1---JOI52Oxh1I
str2---JOI520xh1I
str1---OgJhUOxb91
str2---OgJhU0xb91
str1---SRA1yOx9KE
str2---SRA1y0x9KE
str1---xxwn3OxbaE
str2---xxwn30XbaE
str1---xwn3OxbaEs
str2---xwn30XbaEs
str1---O3irgOxSGL
str2---O3irg0XSGL
str1---3irgOxSGLE
str2---3irg0XSGLE
str1---LBs/SOxbuO
str2---LBs/S0xbuO
str1---5aW8POx/7v
str2---5aW8P0X/7v
str1---aW8POx/7vW
str2---aW8P0X/7vW
str1---hQpEoOxCQU
str2---hQpEo0XCQU
str1---QpEoOxCQUF
str2---QpEo0XCQUF
str1---mWMdHOxt9x
str2---mWMdH0xt9x
str1---Y+gAvOxajf
str2---Y+gAv0Xajf
str1---+gAvOxajfN
str2---+gAv0XajfN

where there are 0 and O , X and x , the string uploaded by the front end is different from the string received by the back end.

searched the Internet and found that most of the problems were the plus sign and space when sending Base64.

the PHP language version used on the server side is v5.6
jQuery $.ajax () method for uploading.

there is no google related information, so come to the forum to ask you for advice as follows

-0-