美文网首页我爱编程
js图片压缩上传

js图片压缩上传

作者: 放逐的帝王 | 来源:发表于2018-05-24 14:43 被阅读0次

前端有时候会遇到图片太大,预览过慢和无法传给后台的困境,另外还浪费流量。
在这里给大家推荐一款配合jQuery运行的插件:lrz.bundle.js;
这个插件的利用非常简单:传入图片信息,和需要压缩的尺寸(选填)就可以了

$("input[name="file"]").off().on("change",function(){
  var _this = this;
  var freader = new FileReader();
  if (_this.files[0].size /1024>2 * 1024){
    //在图片大于2M的情况下压缩
    lrz(_this.files[0],{width:2014}).then(function(rst){
      $.ajax({
        url:'',
        type:'',
        data:{
            base64: rst.base64.split(',')[1],
            其他需要的数据....         
        }
        dataType:'',
        async: ,
        success:function(data){
          传给后台后,前端需做的处理....
        }
      })
    }).catch(function (err) {
                // 处理失败会执行
                alert("图片压缩失败,请重新上传")
            }).always(function () {
                // 不管是成功失败,都会执行
               
            });
  }
})

但网上有的lrz.bundle.js可能是提取出来的一部分,兼容性不太好,我第一次下了一个结果不兼容安卓只有iOS可以用,后来下了全的lrz.all.bundle.js就可以了, 简书里不能放文件,如果有需要,联系我

相关文章

  • js图片压缩预览

    图片压缩预览(具体上传请看另外一篇文章,讲解的更详细图片压缩上传) html结构 js代码 css代码 欢迎访问我...

  • js图片压缩上传

    前端有时候会遇到图片太大,预览过慢和无法传给后台的困境,另外还浪费流量。在这里给大家推荐一款配合jQuery运行的...

  • js压缩上传图片

    一、html部分 二、js部分1.获取图片文件 2.利用canvas压缩图片,根据画布大小和图像质量压缩 3.通过...

  • 微信小程序上传图片压缩

    上传图片时图片过大,接口请求速度会很慢,利用canvas对图片进行压缩 wxml文件: js文件:

  • iOS 网络上传图片

    上传图片 构造参数(NSArray *)files 上传图片—压缩 压缩到小于(...

  • iPic for Mac(图床神器) v1.7.0中文免费版

    上传图片相关设置 上传前压缩图片 可以在 iPic 的 偏好设置 中开启「上传前压缩图片」选项,目前支持压缩的图片...

  • 前端图片压缩上传

    (纯js的质量压缩,非长宽压缩) 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需...

  • 图片压缩后上传(压缩工作在前端完成)

    本文只是经# 图片纯前端JS压缩的实现核心代码的简单修改后的多图片上传版本; HTML JS变量及辅助函数 JS核...

  • js图片压缩上传demo

    以为目前没有找到原声javascript的方法进行替换所以我们还是引入了jquery 一,引入jquery 二,界...

  • 纯JS图片压缩上传

    此demo为大于1M对图片进行压缩上传若小于1M则原图上传,可以根据自己实际需求更改。demo源码如下:

网友评论

    本文标题:js图片压缩上传

    本文链接:https://www.haomeiwen.com/subject/dpdfjftx.html