使用Ajax传递Canvas转化的Base64格式图片出错。

Question

因为要做一个给图片加水印的效果，所以打算前端使用Canvas将水印图片绘制到用户选择的图片上，再将处理后的图片传给PHP的Apache服务器。

结果可以保存成图片，但是图片的效果与预期不符合。

前端在发送数据到服务器端之前，预览那个Base64编码的图片是达到了预期的效果的。

预期效果

实际效果

这个实际效果是我截图的，原图保存下来的可以在电脑上打开预览，但是在论坛的上传图片无法正常预览

前后端再分别保存出了图片转的Base64字符串。
发现前端发送的字符串和后端接收的字符串是不同的。

于是写了个函数，打印出不同，主要集中在以下位置：

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

在有关于0和O，X和x的位置，前端上传的字符串和后端接收的字符串产生了不同。。。

在网上搜了下，得到的多是在发送Base64的时候的加号和空格的问题。

服务器端使用的PHP语言版本为v5.6
上传使用的jQuery的$.ajax()方法。

没google到相关的信息，所以来论坛向大家请教以下

-0-

Answer 1

都是打水印的话，为什么不把这不操作交给后端处理。
你们通过$.ajax 发送数据的时候你的这个 base64 是 直接字符串过去，还是怎么处理的。
麻烦贴下 你们network 的请求参数方便查看