localResizeIMG—lrz本地图片压缩裁剪插件推荐 亲测 原创 收藏

文章标签: 图片特效
  • :
  • 04-06 09:17
  • :
  • 935次
  • :
  • 0条
  • 12赞

简介本文主要提供localResizeIMG插件的下载,使用和实例,localResizeIMG是一款非常流行的本地图片压缩插件,使用起来也非常的简单。

本文站长给大家提供一个非常知名和流行的本地图片压缩插件:localResizeIMG,简称lrz。

本文的最后会有完整的在线实例演示地址!

一:localResizeIMG(lrz)插件的获取和下载:

//可以通过下面的链接获取到源文件
https://github.com/think2011/localResizeIMG
//也可以通过下面的站长提供的百度云来下载:
链接: https://pan.baidu.com/s/1quvZEhM8ucsj2z8PCZgK8A 提取码: isxk

二:localResizeIMG(lrz)插件的使用方法及属性:

lrz(file,{
    width:800,    //设置图片压缩后的最大宽度,默认为原图宽度
    height:600,    //同上
    quality:0.7,    //图片压缩质量,取值 0 - 1,默认为 0.7
    fieldName:"aijquery"    //后端接收的字段名,默认:file,一般不用这项,我们要上传数据的话,可以自定义FormData对象      
}).then(function(rst){
    rst.formData //后端可处理的数据
    rst.file     //压缩后的file对象,如果压缩率太低,将会是原始file对象
    rst.fileLen //压缩后的图片的大小,
    rst.base64     //生成后的图片base64,后端可以处理此字符串为图片,也可以直接用于 img.src = base64
    rst.base64Len     //生成后的base64的大小,后端可以通过此值来校验是否传输完整
    rst.origin //原始的file对象,里面存放了一些原始文件的信息,例如大小、日期等
}).catch(function(err){    //处理失败后执行
    
}).always(function(){    //必然执行

});

上面代码里,lrz有两个参数,第一个参数是file对象,第二个参数可以省略,是用来对图片压缩时的一些设置。

以前站长写过一篇关于获取file对象的两种方法,一种是file表单,一种是拖拽,可以看一下:Html5里的file对象的相关属性,和获取file对象的两种方法

三:具体的完整实例:

现在我们要来做一个图片上传的功能,要求:

  1. 可以预览;

  2. 可以拖拽上传;

  3. 要求用jquery的ajax方式把数据提交到后台;

1》所需要的HTLM核心内容如下:

<div id="drop" class="w-75 mx-auto">
    <h2>可把图片直接拖拽到这里</h2>
</div>
<input type="file" class="form-control-file mt-1 mx-auto" id="selectfile">
<button id="Up" class="btn btn-primary mt-2">上传</button>

因为我们最后要自定义FormData对象,所以HTML里不需要加form标签。

2》先来实现拖拽功能,可以参考站长以前写的这篇文章:jquery拖拽上传,并预览图片的具体方法及实例

var $this=$("#drop");
with($this){
    on("dragenter",function(){$this.addClass("drag_hover");});
    on("dragleave",function(){$this.removeClass("drag_hover");});
    on("dragover",function(e){
      e.originalEvent.dataTransfer.dragEffect = 'copy';
      e.preventDefault();
    });
    on("drop",function(e){
      e.preventDefault();
      var files = e.originalEvent.dataTransfer.files;
      $this.removeClass("drag_hover");
      if(files.length != 0){GetFile(files);};
    });
};

上面这段代码就是实现“拖拽”功能的代码了,代码很简单,站长在写代码的时候,习惯把各个功能分开,这样“可阅读性”强,也方便维护,上面代码里的GetFile就是用来处理和获取file对象的函数了。

3》GetFile 处理获取到的file对象,并对它进行压缩处理:

function GetFile(files){
    var file=files?files[0]:false;if(!file){return false;};
    if(file){
        lrz(file,{
            width:600,//设置压缩后的最大宽
            height:180,
            quality:0.6//图片压缩质量,取值 0 - 1,默认为0.7
        }).then(function(rst){
            console.log(rst);
            ShowFile(rst.file);
        }).catch(function(err){
            console.log(err);
            alert("压缩图片时出错,请联系站长:QQ254904780!");
            return false;
        });
    };
};

为了方便阅读和理解,所以上面的代码站长只保留了处理和压缩图片的功能,在上面的代码里,我们还可以在then里加上添加FormData数据的功能,把压缩后的file对象添加到FormData里,然后当我们要上传的时候,就可以直接上传FormData了,在文章最后的在线实例演示里,站长是加上去的,大家可以点开看看。

4》ShowFile 把处理后的图片显示出来,实现图片的预览功能:

function ShowFile(file){
    var reader = new FileReader();
    reader.onload = function(e) {
        var img=new Image();
        img.src=e.target.result;
      	$("#drop").html(img);
    };
    reader.onerror=function(e,b,c){
    	//error
    };
    reader.readAsDataURL(file);
}

用FileReader对象来读取file对象,要注意,要先把onload和onerror事件定义好,再用readAsDataURL来读取file。

5》使用jquery的ajax来上传数据到后台:

function DoUp(){
    $.ajax({
        url:"服务器端接收数据的文件",
        type:"POST",
        data:UForm,
        success:function(d){
            //成功
        },
        error:function(e){alert("上传出错!");},
        contentType:false,
        processData:false
    });
}

上面代码里,UForm,就是我们定义的FormData对象了,我们可以在程序里自己创建:

PS:FormData对象可参考:《通过实例来了解FormData对象的方法和属性[原创]

var UForm=new FormData();

往UForm里添加数据也很简单,比如我们要添加一个上传开始的时间戳:

UForm.append("times",$.now());//第一个参数是 字段名,第二个参数是具体的值

在上面第三步,处理和压缩file对象的then里,把处理后的file对象添加到FormData里:

UForm.append("aijQueryUpImage",rst.file);

当然,你也可以加上自己所需要的其它数据。

站长写文章不容易,如果转载的话,请备上本站原文网址!本文首发:爱jQuery www.aijquery.cn

好了,实例到这里就已经完成了,下面是站长准备的完整的在线实例演示:

jquery+lrz实现本地图片预览和压缩后上传的在线演示



您正在找的文章可能是: