移动端使用localResizeIMG4压缩图片(2)

<?php $base64_image_content = $_POST['img']; if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){ $type = $result[2]; //jpeg $img = base64_decode(str_replace($result[1], '', $base64_image_content)); //返回文件流 } //var_dump($_POST); //string(1507) "data:image/jpeg;base64,/9j/4AAQSkZJR... //var_dump($result); //"data:image/jpeg;base64," "data:image/jpeg;base64," "jpeg" //var_dump($img); //返回的是资源,直接使用<img src="https://www.jb51.net/article/$img" />可以显示图片 /* 输出到文件 */ //方式一:直接使用file_put_contents $tmp_file = time(). '.' .$type; //file_put_contents($tmp_file, $img); //可以直接将文件流保存为本地图片 //方式二:先转换为GD图像资源,再生成文件或显示输出 $im = imagecreatefromstring($img); //resource(2) of type (gd) 图像资源 imagejpeg ($im, $tmp_file); //图像流(image)以 JPEG 格式输出到标准输出(浏览器或者文件) //或者使用AliOSS上传 //$url = OSS::upload($img, $type); return ajaxReturn($tmp_file); function ajaxReturn($data = array(), $code = 0, $msg = '成功'){ $result = array( 'result' => $data, 'ecd' => $code, 'msg' => $msg, ); echo json_encode($result); exit; }

示例代码在github上:https://github.com/52fhy/localResizeIMG4/tree/master/lrz

参数文档

参数

lrz(file, [options]);

file 通过 input:file 得到的文件,或者直接传入图片路径

[options] 这个参数允许忽略

width {Number} 图片最大不超过的宽度,默认为原图宽度,高度不设时会适应宽度。

height {Number} 同上

quality {Number} 图片压缩质量,取值 0 - 1,默认为0.7

fieldName {String} 后端接收的字段名,默认:file

返回结果

返回值是一个promise对象

then(rst)

rst.formData 后端可处理的数据

rst.file 压缩后的file对象(默认已经丢在rst.formData有一份了),需要注意的是如果压缩率太低的话,这个会是原始的file对象

rst.fileLen 生成后的图片的大小,后端可以通过此值来校验是否传输完整

rst.base64 生成后的图片base64,后端可以处理此字符串为图片,也直接用于img.src = base64

rst.base64Len 生成后的base64的大小,后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)

rst.origin 也就是原始的file对象,里面存了一些原始文件的信息,例如大小,日期等。

catch(err)

always()

lrz的历史

lrz1,基于jquery,使用需要引用jquery.js、localResizeIMG.js、patch/mobileBUGFix.mini.js(客户端)。
lrz2,基于原生js,却是用coffeescript写的 Orz, 有UI,存在已知BUG。
lrz3,基于原生js,提供pc & mobile版本,修复BUG和疑问,再一次重构了代码,移除了UI,仅作为纯粹的工具,方便二次开发。
lrz4,基于原生js,已升级到稳定版本,推荐使用。
lrz原理

基本原理是通过canvas渲染图片,再通过 toDataURL 方法压缩保存为base64字符串(能够编译为jpg格式的图片)。

详见WIKI

如何自定义上传按钮

默认的上传按钮不好看,而且安卓和iPhone也不一样。需要进行统一:

原理就是使用背景图,把input本身透明度设置为0.

<div> <input type="file" capture="camera" accept="image/*"> </div>

1、php读取和保存base64编码的图片内容 - fxhover的个人空间 - 开源中国社区

2、参数文档 · think2011/localResizeIMG Wiki
https://github.com/think2011/localResizeIMG/wiki

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wypjgp.html