移动端使用localResizeIMG4压缩图片

移动h5开发避免不了上传图片，一般我们使用html自带的控件input或者使用微信上传API。但微信上传API不是任何地方都可以使用的，使用html自带的控件input上传又免不了图片体积太大，上传不稳定。localResizeIMG4就是为此而生的。

本文演示版本localResizeIMG 4.9.35。

特点

兼容IOS，Android，PC、自动按需加载文件
支持压缩比例
支持原生JS、jQuery/Zepto
支持Promise特性
使用base64

下载地址

localResizeIMG共有4个历史版本，每个版本间使用方法可能不一样。本文以最新稳定版本localResizeIMG4为例。

https://github.com/think2011/localResizeIMG/archive/4.9.35.zip

如何使用

页面引入

html

origin: File

lastModified: 1442482311173

lastModifiedDate: Thu Sep 17 2015 17:31:51 GMT+0800 (中国标准时间)

name: "upload-add.png"

size: 291

type: "image/png"

webkitRelativePath: ""


其中base64属性是带图片类型的base64编码，可直接用于img标签的src。如果后端需要将这个属性值转为图片保存，就要先去除图片类型，文章后面有示例。之前的版本localResizeIMG1会同时返回result.base64和result.clearbase64(不带图片类型的编码)。
使用jQuery/Zepto

$(function(){
 $('input[name=logo]').on('change', function(){
   lrz(this.files[0], {width: 640})
   .then(function (rst) {

    $.ajax({
     url: site_url + 'api/user/updLogo',
     type: 'post',
     data: {img: rst.base64},
     dataType: 'json',
     timeout: 200000,
     error: doAjax.error,
     success: doAjax.success,
    });
     
   })
   .catch(function (err) {

   })
   .always(function () {

   });
 });
});



如果您的图片不是来自用户上传的，那么也可以直接传入图片路径：

lrz('./xxx/xx/x.png')
  .then(function (rst) {
   // 处理成功会执行
  })
  .catch(function (err){
   // 处理失败会执行
  })
  .always(function () {
   // 不管是成功失败，都会执行
  });


后端处理（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)); //返回文件流
}

//使用AliOSS上传
$url = OSS::upload($img, $type);



其中$result内容：

Array
(
 [0] => data:image/jpeg;base64,
 [1] => data:image/jpeg;base64,
 [2] => jpeg
)


完整例子（HTML+PHP）
请在服务器环境(如LAMP)运行。
index.html



 
 
 
 



 上传图片
 
 



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


2、参数文档 · think2011/localResizeIMG Wiki

https://github.com/think2011/localResizeIMG/wiki


3、think2011/localResizeIMG: 前端本地客户端压缩图片，兼容IOS，Android，PC、自动按需加载文件

https://github.com/think2011/localResizeIMG
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。