随着移动应用的兴起，越来越多的人们开始使用云产品，大家慢慢开始喜欢上了拍照，录像。并且喜欢直接上传朋友圈，向朋友展示。但是，由于目前手机硬件厂商的技术实力已经非常的强了，很多的硬件指标也已经做的很高了，如手机拍出来的照片直接就是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">                    
                                                            ×                    标题图选择                                选择图片                                    关闭                    确定