jquery图片上传前预览|jquery图片上传和裁剪应用：Croppie使用例子

【www.bbyears.com--jquery】

在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求。最常见的就是各用户系统要求用户上传和裁剪头像的应用。今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件，它叫Croppie。

HTML

首先我们将相关js和css文件载入head中。

 代码如下

<script src="jquery.min.js"></script>
<script src="croppie.min.js"></script>

接下来我们在页面上放置一个图片上传按钮，我们可以用css将type="file"的文件选择控件转成按钮样式。选择完图片后，在#upload-demo展示上传图片，以及调用裁剪插件Croppie。#result用来展示裁剪后的图片。

 代码如下
   
        上传
       
   
   
       
        裁剪
   
   

CSS

使用以下CSS代码，我们很完美的将选择文件的控件转成按钮的样式，其实就是将type="file"透明度设成0，然后和button重叠。此外，我们先将图片裁剪区域.crop设置为不可见，等选择文件后再显示。
button,

 代码如下

a.btn {
    background-color: #189094;
    color: white;
    padding: 10px 15px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    text-shadow: none;
}
button:focus {
    outline: 0;
}
 
.file-btn {
    position: relative;
}
.file-btn input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
 
.actions {
    padding: 5px 0;
}
.actions button {
    margin-right: 5px;
}
.crop{display:none}

jQuery

首先利用HTML5的FileReader API读取本地文件，然后$("#upload-demo").croppie()调用了Croppie插件。Croppie的选项viewport：可以设置所裁剪图片的宽度和高度，以及类型（圆形或方形）；选项boundary是图片的外围尺寸。它还有参数mouseWheelZoom：是否支持鼠标滚轮缩放图像；showZoom：是否展示缩放条工具；update：回调函数。

 代码如下 $(function(){
    var $uploadCrop;
 
        function readFile(input) {
             if (input.files && input.files[0]) {
                var reader = new FileReader();
                
                reader.onload = function (e) {
                    $uploadCrop.croppie("bind", {
                        url: e.target.result
                    });
                }
                
                reader.readAsDataURL(input.files[0]);
            }
            else {
                alert("Sorry - you"re browser doesn"t support the FileReader API");
            }
        }
 
        $uploadCrop = $("#upload-demo").croppie({
            viewport: {
                width: 200,
                height: 200,
                type: "circle"
            },
            boundary: {
                width: 300,
                height: 300
            }
        });
 
        $("#upload").on("change", function () { 
            $(".crop").show();
            readFile(this); 
        });
        $(".upload-result").on("click", function (ev) {
            $uploadCrop.croppie("result", "canvas").then(function (resp) {
                popupResult({
                    src: resp
                });
            });
        });
        
    function popupResult(result) {
        var html;
        if (result.html) {
            html = result.html;
        }
        if (result.src) {
            html = "";
        }
        $("#result").html(html);
    }
});

当点击“裁剪”按钮后，再次调用Croppie的result的方法，返回一张裁剪后的图片，并显示在#result中

本文来源：http://www.bbyears.com/wangyezhizuo/89098.html