移动端使用localResizeIMG4压缩图片

(编辑：jimmy 日期: 2024/11/16 浏览：3 次 )

移动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

如何使用

页面引入

<script src="/UploadFiles/2021-04-02/lrz.bundle.js">

html


<input type="file" capture="camera" accept="image/*" name="logo" id="file">


capture="camera"可以出现拍照；

accept="image/*"仅接受图片
通过change事件可以得到用户选择的图片。
使用原生js


document.querySelector('input').addEventListener('change', function () {
 // this.files[0] 是用户选择的文件
 lrz(this.files[0], {width: 1024})
  .then(function (rst) {
  
   // 把处理的好的图片给用户看看呗（可选）
   var img = new Image();
   img.src = rst.base64; //base64字符串

   img.onload = function () {
    document.body.appendChild(img);
   };

   return rst;
  })

  .then(function (rst) {
   // 这里该上传给后端啦

   /* ==================================================== */
   // 原生ajax上传代码，所以看起来特别多，但绝对能用
   // 其他框架，例如jQuery处理formData略有不同，请自行google，baidu。
   var xhr = new XMLHttpRequest();
   xhr.open('POST', 'http://localhost:5000/');

   xhr.onload = function () {
    if (xhr.status === 200) {
     // 上传成功
    } else {
     // 处理其他情况
    }
   };

   xhr.onerror = function () {
    // 处理错误
   };

   xhr.upload.onprogress = function (e) {
    // 上传进度
    var percentComplete = ((e.loaded / e.total) || 0) * 100;
   };

   // 添加参数
   rst.formData.append('fileLen', rst.fileLen);
   rst.formData.append('xxx', '我是其他参数');

   // 触发上传
   xhr.send(rst.formData);
   /* ==================================================== */

   return rst;
  })

  .catch(function (err) {
   // 万一出错了，这里可以捕捉到错误信息
   // 而且以上的then都不会执行

   alert(err);
  })

  .always(function () {
   // 不管是成功失败，这里都会执行
  });
});




返回的rst对象数据示例：
{origin: File, base64: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…iigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/Z", base64Len: 1507}
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


<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <title>移动端使用localResizeIMG4压缩图片</title>
 <script src="/UploadFiles/2021-04-02/lrz.bundle.js">

upload.php


<"data:image/jpeg;base64,/9j/4AAQSkZJR...
//var_dump($result); //"data:image/jpeg;base64," "data:image/jpeg;base64," "jpeg"
//var_dump($img); //返回的是资源，直接使用<img src="/UploadFiles/2021-04-02/$img">

示例代码在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 style="background:url(images/upload-add.png) no-repeat right/40px;"> 
 <input type="file" capture="camera" accept="image/*" name="logo" id="file" class="selectinput" style="width:100%;opacity:.01">
</div>



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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。



            
            上一篇：ionic+AngularJs实现获取验证码倒计时按钮

            下一篇：使用Xcache缓存器加速PHP网站的配置方法

一句话新闻

微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键

几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。

友情链接:杰晶网络 DDR爱好者之家南强小屋黑松山资源网白云城资源网网站地图 SiteMap