cropper裁剪图片（一）

1、前言

在上传图片的过程中，我们经常会限制上传图片的尺寸，但是我们的图片来源尺寸各异。所以在上传之前需要先裁剪图片然后再上传。今天使用一种插件cropper.js这个插件完成几个小demo，记录一下，以备后续使用。

2、使用前准备

cropper该插件有两种版本，一种是依赖于jquery，另一种则不依赖，使用原生的JS。本例使用依赖jquery的版本。
使用的时候需要引入依赖的js和css：（可以直接才github上去下载）

<link rel="stylesheet" href="css/cropper.css"> 
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="js/cropper.js"></script>

3、示例—通过缩放图片来裁剪图片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片裁剪示例</title>
    <link rel="stylesheet" href="css/cropper.css">
    <style type="text/css">
        .container,img{
            width: 400px;
            height: 300px;
            float: left;
        }
        button{
            margin-top: 9px;
            width: 70px;
            height: 30px;
        }
        .preview {
            width: 120px;
            height: 90px;
            overflow: hidden;
            float: left;
            margin-left: 15px;
        }
        .btn-div{
            margin-top: 320px;
        }
    </style>
</head>
<body>
<h3>图片源</h3>
<div class="container">
    <img id="image" src="img/mm.jpeg"/>
</div>
<div class="preview"></div>
<div class="btn-div">
    <button id="btn">裁剪</button>
    <button id="reset">重置</button>
</div>
<h3>裁剪结果</h3>
<div id="result"></div>
</body>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/cropper.js"></script>
<script type="text/javascript">
    $(function(){
        //初始化数据
        $("#image").cropper({
            aspectRatio: 4 / 3, //显示裁剪比例
            preview: '.preview', //这里预览如果没有效果，需要加上一段css（overflow: hidden）
            viewMode: 3,        //全屏铺满，再缩小都没有空隙
            dragMode: 'move',   //制动拖动方式
            autoCropArea: 1,    //合适裁剪区域的比例
            restore: false,     //调账窗口大小，不保存裁剪区域
            modal: false,       //取消遮罩
            guides: false,      //去掉裁剪虚线
            highlight: false,   //取消高亮裁剪框
            cropBoxMovable: false,  //禁止裁剪框移动
            cropBoxResizable: false //禁止裁剪框改变大小
        });

        $("#btn").click(function(){
            //获取裁剪的图片信息
            /*
            如果是外界传值的话，需要在官网查询有没有set方法，如果有可以用$().cropper("set方法名","需要赋的值")，这样的方法传递。
            */
            var croppedCanvas = $("#image").cropper('getCroppedCanvas');
            $("#result").empty().html('<img src="' + croppedCanvas.toDataURL() + '">');
        });

        $("#reset").click(function(){
            //还原图片的初始值，reset方法时cropper中自带的方法。
            $("#image").cropper('reset');
        });
    });
</script>
</html>

3、运行效果

这里写图片描述

4、参考资料

官网： https://www.awesomes.cn/repo/fengyuanchen/cropper
官网示例：http://fengyuanchen.github.io/cropper/
技术博客：http://www.jianshu.com/p/b252a7cbcf0b

cropper裁剪图片（一）

猜你喜欢