html 图片压缩插件,图片前端压缩插件Cropper

随着移动应用的兴起，越来越多的人们开始使用云产品，大家慢慢开始喜欢上了拍照，录像。并且喜欢直接上传朋友圈，向朋友展示。但是，由于目前手机硬件厂商的技术实力已经非常的强了，很多的硬件指标也已经做的很高了，如手机拍出来的照片直接就是4000*3000，视频也基本是高清视频，这样就直接导致了图片或是视频体积过大，直接上传会浪费大量的流量。

因此前端压缩技术的出现在一定程度上解决了这个问题。

下面我来介绍一下我使用最多的前端压缩插件cropper，这个插件的功能非常强大，通过参数的配置，可以让其适应移动端或是让其适应pc端。其github地址为:https://github.com/fengyuanchen/cropper

首先，这个插件的引入方式为：

根据自己文件的实际路径加以调整。

另外，这个插件是用与

标签中的，因此要想合理使用这个插件，最好添加上模态框功能，模态框是什么不是这节课的内容。下次再讲。

一个好的截图插件需要满足一下几部。

第一：点击需要截图的图片，然后触发一个input type="file"的组件。

这里我们使用jquery的功能，$("#input"),click();来实现。

第二：当新图片被选择后，弹出模态框，然后使用html5的新特性，直接预览被选择的图片文件。

这是一个很重要的知识点，这里不深入，只告诉大家直接使用

var URL = window.URL || window.webkitURL;

var imgURL = URL.createObjectURL($("#input")[0].files[0]);

第三：载入插件

$('#imagepanel').cropper({

aspectRatio: 72 / 41 //图片选择框分辨率

});

下面是我写的一段完整的图片选择代码ajax模板引擎                                                ');

$('#imagepanel').cropper({

aspectRatio: 72 / 41

});

}

function changeimagepath() {

var url = $('#imagepanel').cropper('getCroppedCanvas', {width:288, height:164}).toDataURL('image/jpeg');

$('#image').attr("src", url);

}

" _ue_custom_node_="true">

×                    标题图选择                                选择图片                                    关闭                    确定