雷小达
雷小达
  • 发布:2016-09-17 16:41
  • 更新:2021-02-09 10:22
  • 阅读:6391

关于采用localResizeIMG压缩成base64上传图片出现base64代码受损的问题的解决方案

分类:MUI

为客户开发触屏版的头像上传功能时遇到这个问题,这个问题困扰了好几天。反复的打印localResizeIMG压缩后的base64的代码和通过mui.post方法提交到后端的base64数据。然后通过比对发现post过来的base64代码和localResizeIMG压缩过的能显示的base64代码是有差异的。主要是差别如下:

localResizeIMG的base64代码中是 +/ 而post到后端打印出来的是 + 也就是说部分+/ 被替换成+了。具体的问题没有再深入研究。这个情况遇到问题是,如果图片比较小都没问题,如果原始图片超过比如500kb(这个和localResizeIMG压缩比例有关系,这里就因人而异了),就容易出现上传到后台的图片是不完整的,有损的。甚至是黑图。

OK,解决方法来了。
在post之前,将base64的代码转成数组。如下:

    mui(".member_from").on("tap","button",function () {  
        var avatar_size = document.getElementById("avatar_photo").value;  
        var avatar = document.getElementById("avatar_show").src;  
		avatar = avatar.split("/");  
		mui.post('后端地址',{avatar:avatar,imgsize:avatar_size},function(data){  
			if (data.state==false) mui.alert('原因是什么什么什么', '操作失败!');   
		},'json');  
    });

后端处理。这个做开发的就很容易了。一句话的问题:

	$base64_image_contents = $_POST["avatars"];//提交过来的是数组  
	$base64_image_content=implode('/',$base64_image_contents);//数组转成字符串

后面base64转图片的这个就不发了。坛子里很多,搜下大把。

不知道是不是图片太大,造成base64代码过大而造成的图片受损的问题。总之,这个解决方案轻松搞定很多大图。

0 关注 分享

要回复文章请先登录注册

1***@qq.com

1***@qq.com

我使用的是官网推荐的,然后系数调到自己认为合适的。

有问题可以找我,一起学习吧

我的个人项目已经上线了,我使用的是七牛云存储(阿里也不错的),大概原理也一样吧,你们可以看看,很多功能都有了。

1、Android的(软著没申请下来,暂时上不了架):http://d.firim.top/tc7b?utm_source=fir&utm_medium=qrhttp://d.firim.top/tc7b?utm_source=fir&utm_medium=qr

2、iOS已经上架搜索:猫云—优质贴心的宠物平台

3、顺便也给你们给链接吧,例如iOS做唤起第三方或某个APP时可以使用到 https://apps.apple.com/cn/app/猫云-优质贴心的宠物社交平台/id1474103355
2021-02-09 10:22
所谓

所谓

我是跟踪出来的base64字符,ios的正常,安卓跟踪出来的字符,用转换工具还原不了图片,是空白的。
但是2个在移动端里面的image.src =base64却都是可以正常显示的
2017-08-16 14:55
祺佑

祺佑

我也碰到了,我试下看看能不能解决。
2017-05-04 14:10