Cropper

jQuery.cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。

官网：https://github.com/fengyuanchen/cropper

使用方法
使用该图片剪裁插件首先要引入必要的js和css文件。

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->

<link  href="/path/to/cropper.css" rel="stylesheet">

<script src="/path/to/cropper.js"></script>

HTML结构
可以将图片或canvas直接包裹到一个块级元素中。

<!-- Wrap the image or canvas with a block element -->

<div class="container">

    <img src="picture.jpg">

</div>

调用插件
可以使用$.fn.cropper方法来初始化该图片剪裁插件。

var options = {

    aspectRatio: 4 / 3,//设置裁切框的宽高比。默认情况下，裁剪框是自由比例。

    preview: '.img-preview',

    crop: function (e) {

        $dataX.html(Math.round(e.x));

        $dataY.html(Math.round(e.y));

        $dataHeight.html(Math.round(e.height));

        $dataWidth.html(Math.round(e.width));

        $dataRotate.html(e.rotate);

        $dataScaleX.html(e.scaleX);

        $dataScaleY.html(e.scaleY);

        var _$dataWH = reductionTo(Math.round(e.width), Math.round(e.height));

        $dataWH.html(_$dataWH[0] + '/' + _$dataWH[1]);

    }

};

// 初始化函数

$image.cropper(options);

$image.cropper({

    built: function () {

    }

});

参数

你可以通过$().cropper(options)方法来设置参数。如果你想改变全局默认参数，可以使用$.fn.cropper.setDefaults(options)方法。
aspectRatio：类型：Number，默认值NaN。设置剪裁容器的比例。
crop：类型：Function，默认值null。当改变剪裁容器或图片时的事件函数。
preview：类型：String(jQuery选择器)，默认值''。添加额外的元素（容器）的预览。注意：
最大宽度是剪裁容器的初始化宽度
最大高度是剪裁容器的初始化高度
如果你设置了aspectRatio参数，确保预览容器具有相同的比例
strict：类型：Boolean，默认值true。在strict模式中，canvas不能小于容器，剪裁容器不能再canvas之外。
responsive：类型：Boolean，默认值true。是否在窗口尺寸改变的时候重置cropper。
checkImageOrigin：类型：Boolean，默认值true。默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳，及图片的重新加载。
background：类型：Boolean，默认值true。是否在容器上显示网格背景。
modal：类型：Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
guides：类型：Boolean，默认值true。是否在剪裁框上显示虚线。
highlight：类型：Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
autoCrop：类型：Boolean，默认值true。是否在初始化时允许自动剪裁图片。
autoCropArea：类型：Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁区域的大小。
dragCrop：类型：Boolean，默认值true。是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。
movable：类型：Boolean，默认值true。是否允许移动剪裁框。
resizable：类型：Boolean，默认值true。是否允许改变剪裁框的大小。
zoomable：类型：Boolean，默认值true。是否允许放大缩小图片。
mouseWheelZoom：类型：Boolean，默认值true。是否允许通过鼠标滚轮来缩放图片。
touchDragZoom：类型：Boolean，默认值true。是否允许通过触摸移动来缩放图片。
rotatable：类型：Boolean，默认值true。是否允许旋转图片。
minContainerWidth：类型：Number，默认值200。容器的最小宽度。
minContainerHeight：类型：Number，默认值100。容器的最小高度。
minCanvasWidth：类型：Number，默认值0。canvas 的最小宽度（image wrapper）。
minCanvasHeight：类型：Number，默认值0。canvas 的最小高度（image wrapper）。
build：类型：Function，默认值null。build.cropper事件的简写方式。
built：类型：Function，默认值null。built.cropper事件的简写方式。
dragstart：类型：Function，默认值null。dragstart.cropper事件的简写方式。
dragmove：类型：Function，默认值null。dragmove.cropper事件的简写方式。
dragend：类型：Function，默认值null。dragend.cropper事件的简写方式。
zoomin：类型：Function，默认值null。zoomin.cropper事件的简写方式。
zoomout：类型：Function，默认值null。zoomout.cropper事件的简写方式。

eg:

//index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/cropper.css">

    <link rel="stylesheet" href="css/main.css">

</head>

<body>

<div class="wrapper">

    <!--用块元素（容器）包装图像或画布元素-->

    <div class="img-container">

        <img id="image" src="data:images/picture.jpg" alt="">

    </div>

    <div class="img-preview-container">

        <h1>预览区域</h1>

        <div class="img-preview">

            <img src="" alt="">

        </div>

    </div>

    <div class="text-container">

        <div class="param-container">

            <div class="param">

                <div class="name">X:</div>

                <div class="value" id="dataX"></div>

                <div class="unit">px</div>

            </div>

            <div class="param">

                <div class="name">Y:</div>

                <div class="value" id="dataY"></div>

                <div class="unit">px</div>

            </div>

            <div class="param">

                <div class="name">Width:</div>

                <div class="value" id="dataWidth"></div>

                <div class="unit">px</div>

            </div>

            <div class="param">

                <div class="name">Height:</div>

                <div class="value" id="dataHeight"></div>

                <div class="unit">px</div>

            </div>

            <div class="param">

                <div class="name">Rotate:</div>

                <div class="value" id="dataRotate"></div>

                <div class="unit">deg</div>

            </div>

            <div class="param">

                <div class="name">ScaleX:</div>

                <div class="right-value" id="dataScaleX"></div>

            </div>

            <div class="param">

                <div class="name">ScaleY:</div>

                <div class="right-value" id="dataScaleY"></div>

            </div>

            <div class="param">

                <div class="name">W/H:</div>

                <div class="right-value" id="dataWH"></div>

            </div>

        </div>

    </div>

    <div class="btn-container" id="ratio_container">

        <div class="btn" data-ratio="16/9">16/9</div>

        <div class="btn" data-ratio="4/3">4/3</div>

        <div class="btn" data-ratio="1">1/1</div>

        <div class="btn" data-ratio="2/3">2/3</div>

        <div class="btn" data-ratio="">Free</div>

    </div>

    <div class="btn-container" id="move_container">

        <div class="btn" data-movex="0" data-movey="-10">上移</div>

        <div class="btn" data-movex="0" data-movey="10">下移</div>

        <div class="btn" data-movex="-10" data-movey="0">左移</div>

        <div class="btn" data-movex="10" data-movey="0">右移</div>

    </div>

    <div class="btn-container" id="zoom_container">

        <div class="btn" data-zoom="0.1">放大</div>

        <div class="btn" data-zoom="-0.1" data-movey="10">缩小</div>

    </div>

    <div class="btn-container" id="rotate_container">

        <div class="btn" data-rotate="45">顺时针旋转</div>

        <div class="btn" data-rotate="-45" data-movey="10">逆时针旋转</div>

    </div>

    <div class="btn-container" id="scale_container">

        <div class="btn" data-scale="x">左右翻转</div>

        <div class="btn" data-scale="y" data-movey="10">上下翻转</div>

    </div>

    <div class="btn-container">

        <div class="btn" id="enable">可用</div>

        <div class="btn" id="disable">冻结</div>

        <div class="btn" id="reset1">重置1</div>

        <div class="btn" id="reset2">重置2</div>

        <div class="btn" id="clear">清空</div>

        <div class="btn" id="destroy">销毁</div>

        <div class="btn">

            <input class="input-upload" id="upload" type="file">

            上传图片

        </div>

    </div>

    <div class="btn-container">

        <div class="btn" id="replace">修改图片地址</div>

    </div>

    <div class="btn-container">

        <div class="btn" id="getCroppedCanvas">裁剪：get Cropped Canvas</div>

    </div>

    <div class="btn-container">

        <div class="btn" id="submit">提交</div>

    </div>

    <img src="" id="test" width="500px" height="500px" alt="">

<div class="fixed-canvas hiddle">

    <div class="fixed-bg"></div>

    <div class="canvas-container">

        <h1>裁剪区域</h1>

        <div class="canvas" id="canvas">

        </div>

        <div class="btn-container" id="modal_canvas_btn">

            <a class="btn" href="javascript:;" >取消</a>

            <a class="btn" id="download" href="javascript:;" download="images/picture.jpg">下载</a>

        </div>

    </div>

</div>

</div>

<script src="js/jquery-3.2.1.js"></script>

<script src="js/cropper.js"></script>

<script src="js/main.js"></script>

</body>

</html>

//main.css

*{margin:;padding:;outline: none}

*:active{-webkit-tap-highlight-color: rgba(0,0,0,0)}

a{text-decoration: none}

.disabled{pointer-events: none;opacity:.65}

h1{font-size: 18px;margin-bottom: 20px}

.hiddle{display: none!important;}

.wrapper{margin: 20px auto;min-width: 1200px}

.img-container{margin-left: 20px;display: inline-block;width: 600px;height: 342px;overflow: hidden;}

.img-preview-container{margin-left: 10px;display: inline-block;vertical-align: top}

.img-preview-container .img-preview{width: 300px;height: 171px;overflow: hidden;border: 1px #ccc solid}

.img-preview-container img{border: 1px #aaa solid}

.fixed-canvas{position: fixed;left: 50%;top:20px; width: 600px;margin-left: -300px;border:1px #aaa solid;border-radius: 6px;}

.fixed-canvas .fixed-bg{position: fixed;left: 0%;top:0%;right:;bottom:;background: rgba(0,0,0,.6);z-index:}

.fixed-canvas .canvas-container{background: #fff;padding: 30px 20px;width: 100%;height: 100%;position: relative;z-index:;border-radius: 6px;box-sizing: border-box}

.fixed-canvas .canvas-container .canvas{width: 456px;border: 1px #ccc solid}

.fixed-canvas .canvas-container .canvas canvas{width: 100%}

/*限制图像宽度以避免容器溢出*/

.img-container img{max-width: 100%} /*这个规则很重要，请不要忽略这个*/

.text-container{display: inline-block;padding-left: 20px}

.text-container .param-container{vertical-align: top}

.param-container .param{display: inline-block;margin: 10px;width: 202px;height:33px;border: 1px #aaa solid;border-radius: 6px;box-sizing: border-box;font-size:}

.param-container .param .name,.param-container .param .value,.param-container .param .unit,.param-container .param .right-value{display: inline-block;height:100%;box-sizing: border-box;text-align: center;color:#495057;vertical-align: top;font-size: 16px;line-height: 31px}

.param-container .param .name,.param-container .param .unit{background: #ccc}

.param-container .param .name{width: 80px}

.param-container .param .value{width: 80px}

.param-container .param .unit{width: 40px}

.param-container .param .right-value{width: 120px;}

.btn-container{margin: 20px;display: inline-block;height: 33px;background: #007bff;border-radius: 6px}

.btn-container .btn{position: relative;padding: 0 20px;display: inline-block;height: 100%;vertical-align: top;color: #fff;line-height: 33px;cursor: pointer;overflow: hidden}

.input-upload{position: absolute;top:;left:;bottom:;right:;display: inline-block;border: 1px red solid;opacity:;}

//main.js

$(function () {

    'use strict';

    var $image = $('#image');

    var $download = $('#download');

    var $dataX = $('#dataX');

    var $dataY = $('#dataY');

    var $dataHeight = $('#dataHeight');

    var $dataWidth = $('#dataWidth');

    var $dataRotate = $('#dataRotate');

    var $dataScaleX = $('#dataScaleX');

    var $dataScaleY = $('#dataScaleY');

    var $dataWH = $('#dataWH');

    var options = {

        aspectRatio: 4 / 3,//设置裁切框的宽高比。默认情况下，裁剪框是自由比例。

        preview: '.img-preview',

        crop: function (e) {

            $dataX.html(Math.round(e.x));

            $dataY.html(Math.round(e.y));

            $dataHeight.html(Math.round(e.height));

            $dataWidth.html(Math.round(e.width));

            $dataRotate.html(e.rotate);

            $dataScaleX.html(e.scaleX);

            $dataScaleY.html(e.scaleY);

            var _$dataWH = reductionTo(Math.round(e.width), Math.round(e.height));

            $dataWH.html(_$dataWH[0] + '/' + _$dataWH[1]);

        }

    };

    // 初始化函数

    $image.cropper(options);

    $image.cropper({

        built: function () {

        }

    });

    // 修改裁剪比例函数

    $('#ratio_container .btn').click(function (event) {

        event.stopPropagation();

        var dataRatio = $(this).attr('data-ratio');

        $image.cropper('destroy').cropper({'aspectRatio': dataRatio});

    });

    // 移动函数

    $('#move_container .btn').click(function (event) {

        event.stopPropagation();

        var dataMovex = parseInt($(this).attr('data-movex'));

        var dataMovey = parseInt($(this).attr('data-movey'));

        $image.cropper('move', dataMovex, dataMovey)

    });

    // 移动函数

    $('#move_container .btn').click(function (event) {

        event.stopPropagation();

        var dataMovex = parseInt($(this).attr('data-movex'));

        var dataMovey = parseInt($(this).attr('data-movey'));

        $image.cropper('move', dataMovex, dataMovey)

    });

    // Keyboard

    $(document.body).on('keydown', function (e) {

        if (!$image.data('cropper') || this.scrollTop > 300) {

            return;

        }

        switch (e.which) {

            case 37:

                e.preventDefault();

                $image.cropper('move', -1, 0);

                break;

            case 38:

                e.preventDefault();

                $image.cropper('move', 0, -1);

                break;

            case 39:

                e.preventDefault();

                $image.cropper('move', 1, 0);

                break;

            case 40:

                e.preventDefault();

                $image.cropper('move', 0, 1);

                break;

        }

    });

    // 放大缩小

    $('#zoom_container .btn').click(function (event) {

        event.stopPropagation();

        var dataZoom = $(this).attr('data-zoom');

        $image.cropper('zoom', dataZoom);

    });

    // 旋转

    $('#rotate_container .btn').click(function (event) {

        event.stopPropagation();

        var dataRotate = $(this).attr('data-rotate');

        $image.cropper('rotate', dataRotate);

    });

    // 翻转

    var scalexVal = 1;

    var scaleyVal = 1;

    $('#scale_container .btn').click(function (event) {

        event.stopPropagation();

        var dataScale = $(this).attr('data-scale');

        if (dataScale == 'x') {

            scalexVal = -scalexVal;

            $image.cropper('scaleX', scalexVal);

        } else if (dataScale == 'y') {

            scaleyVal = -scaleyVal;

            $image.cropper('scaleY', scaleyVal);

        }

    });

    // enable()：使cropper可用。

    $('#enable').click(function (event) {

        event.stopPropagation();

        $image.cropper('enable');

    });

    // disable()：冻结cropper。

    $('#disable').click(function (event) {

        event.stopPropagation();

        $image.cropper('disable');

    });

    // reset()：重置剪裁区域的图片到初始状态。

    $('#reset1').click(function (event) {

        event.stopPropagation();

        $image.cropper('crop');

        $image.cropper('destroy').cropper({'preview': '.img-preview'});

    });

    $('#reset2').click(function (event) {

        event.stopPropagation();

        $image.cropper('reset');

        $image.cropper('destroy').cropper({'preview': '.img-preview'});

    });

    // clear()：清空剪裁区域。

    $('#clear').click(function (event) {

        event.stopPropagation();

        $image.cropper('clear');

    });

    // destroy()：销毁剪裁函数。

    $('#destroy').click(function (event) {

        event.stopPropagation();

        $image.cropper('destroy');

    });

    //上传图片

    $('#upload').change(function (event) {

        var files = this.files;

        if (files && files.length) {

            var file = files[0];

            if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)) {

                var uploadedImageURL = window.URL.createObjectURL(file);

                $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);

                $download.attr('download', uploadedImageURL);

                $('#upload').val('');

            } else {

                alert('请选择正确的图片格式！');

            }

        }

    });

    //修改图片地址

    var imgUrl = 'images/picture.jpg';

    $('#replace').click(function (event) {

        event.stopPropagation();

        imgUrl = (imgUrl == 'images/picture_new.jpg' ? 'images/picture.jpg' : 'images/picture_new.jpg');

        $image.cropper('replace', imgUrl);

        $download.attr('download', imgUrl);

    });

    // 输出裁剪好的图片

    $('#getCroppedCanvas').click(function (event) {

        event.stopPropagation();

        var imgurl = $image.cropper("getCroppedCanvas");

        $("#canvas").html(imgurl);

        $download.attr('href', imgurl.toDataURL());

        $('.fixed-canvas').removeClass('hiddle');

    });

    //点击取消或者下载之后

    $('#modal_canvas_btn .btn').click(function (event) {

        $('.fixed-canvas').addClass('hiddle');

    });

    // 获取数据

    $('#getData').click(function (event) {

        event.stopPropagation();

        var getData = $image.cropper("getData")

        console.log(getData);

    });

    //提交裁剪好的图片到后台

    $('#submit').click(function (event) {

        var imgData = $image.cropper("getCroppedCanvas").toDataURL();

        // console.log(imgData);

        $.ajax({

            url: '',

            dataType: 'json',

            type: "POST",

            data: {"image": imgData},

            success: function () {

                console.log('Upload success');

            },

            error: function () {

                console.log('Upload error');

            }

        });

    });

});

function destory() {

    $image.cropper('destroy').cropper(options);

}

//m,n为正整数的分子和分母

function reductionTo(m, n) {

    var arr = [];

    if (!isInteger(m) || !isInteger(n)) {

        // console.log('m和n必须为整数');

        arr[0] = 0;

        arr[1] = 0;

        return arr;

    } else if (m <= 0 || n <= 0) {

        // console.log('m和n必须大于0');

        arr[0] = 0;

        arr[1] = 0;

        return arr;

    }

    var a = m;

    var b = n;

    (a >= b) ? (a = m, b = n) : (a = n, b = m);

    if (m != 1 && n != 1) {

        for (var i = b; i >= 2; i--) {

            if (m % i == 0 && n % i == 0) {

                m = m / i;

                n = n / i;

            }

        }

    }

    arr[0] = m;

    arr[1] = n;

    return arr;

}

//判断一个数是否为整数

function isInteger(obj) {

    return obj % 1 === 0

}

Cropper的更多相关文章

Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
Image Cropper+java实现截图工具
首先,请移步http://jquery-plugins.net/image-cropper-jquery-image-cropping-plugin下载iamge cropper的有关js文件及css ...
插件介绍：cropper是一款使用简单且功能强大的图片剪裁jQuery插件。
简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...
图片剪裁上传插件 - cropper
图片剪裁上传插件 - cropper <style> .photo-container{float: left;width: 300px;height: 300px;} .photo-co ...
利用cropper插件裁剪本地图片，然后将裁剪过后的base64图片上传至七牛云空间
现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...
图片裁剪(cropper)后上传问题
最近工作需要处理头像裁剪以及上传,研究了几天,写点心得,提醒自己记住踩过的坑,能帮助别人当然更好. 功能基本就是这样: 这里需要注意的是:拿到需求后,不要急于直接上手,花费半个小时,甚至更长时间缕清整 ...
mui开发app之cropper裁剪后上传头像的实现
在大多数app项目中,都需要对用户头像的上传,之前做web开发的时候,我主要是通过input type=file的标签实现的,上传后,使用php对图片进行裁剪,这种方式比较传统简单. 此次app开发中 ...
【jQuery插件】使用cropper实现简单的头像裁剪并上传
插件介绍这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头像上传功能,并且能够预览图片,和对图片进行简单的裁剪.旋转,花了不少时间才看到了这个插件,感觉 ...
node.js平台下，cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
cropper(裁剪图片)插件使用（案例）
公司发布微信H5前端阵子刚刚弄好的H5端的图片上传插件,现在有需要裁剪图片.前端找了一个插件---cropper 本人对这插件不怎么熟悉,这个案例最好用在一个页面只有一个上传图片的功能上而且只适合单个 ...

随机推荐

从零开始的Python学习Episode 3——字符串格式化与for循环
一.字符串格式化利用一段注释记录想要输出的字符串格式,并用 %s . %d 或 %f 依次代替要输出的数据(%s代表字符串,%d代表数字,%f代表浮点数),然后在这段注释之后依次加上要输出的数据. ...
HTML5form表单的相关知识总结
首先在介绍HTML5form表单的新增内容之前,我总结了一下HTML的form表单的内容. <!DOCTYPE html> <html lang="en"> ...
常用算法Java实现之直接插入排序
直接插入排序是将未排序的数据插入至已排好序序列的合适位置. 具体流程如下: 1.首先比较数组的前两个数据,并排序: 2.比较第三个元素与前两个排好序的数据,并将第三个元素放入适当的位置: 3.比较第四 ...
Delegate（QLabel和QComboBox）
一.最终效果二.实现思路 1.createEditor()中create两个控件,分别是QLabel和QComboBox,将其添加到一个widget中,然后返回该widget: 2.setEdito ...
Ubuntu下FileZilla的安装
FileZilla是一个免费而且开源的FTP客户端软件,共有两种版本:客户端版本.服务器版本.FileZilla有条理的界面和管理多站点的简化方式使得FileZilla Client成为一个方便高效的 ...
jsp连接MYSQL数据库教程（文字+图）
步骤: 1.在mysql官网下载JDBC驱动程序.网址:https://dev.mysql.com/downloads/connector/j/ 2.把里面的jar包(mysql-connector- ...
headers的描述
Cache-Control 作用: 这个是非常重要的规则. 这个用来指定Response-Request遵循的缓存机制.各个指令含义如下 Cache-Control:Public 可以被任何缓存所 ...
sql server 带输入输出参数的分页存储过程（效率最高）
create procedure proc_page_withtopmax( @pageIndex int,--页索引 @pageSize int,--每页显示数 @pageCount int out ...
MySQL、HBase、ES的特点和区别
MySQL:关系型数据库,主要面向OLTP,支持事务,支持二级索引,支持sql,支持主从.Group Replication架构模型(本文全部以Innodb为例,不涉及别的存储引擎). HBase:基 ...
自学网络 arp_ignore/arp_announce
1)机器上有好几个IP地址,如何让网卡只接收自己IP地址的数据包: 如何只接收自己网卡的数据包 http://www.cnblogs.com/honpey/p/8447819.html 相关的配置ar ...

Cropper

Cropper的更多相关文章

随机推荐

热门专题