极乐门资源网

移动端使用localResizeIMG4压缩图片
网络编程 2025/1/12 佚名
2 0
极乐门资源网 Design By www.ioogu.com

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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。




                                

                                

                                     

                                

                                    标签：
                                        
localResizeIMG,localResizeIMG4.9.35,压缩图片

                                     

                                
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“移动端使用localResizeIMG4压缩图片”

暂无移动端使用localResizeIMG4压缩图片的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com