cropper.js裁剪图片的使用

这两天难得有时间可以整理一下最近学习的东西，这两天项目中用到了头像上传裁剪的功能，这里只介绍头像的裁剪吧。

单独实现图片剪裁的功能还是挺容易的，入门级别的。看一遍官方给的文档，基本上就明白了。大家如果不想看英文版的官网介绍，可以看这篇博客，讲的特别好。

官网地址：http://fengyuanchen.github.io/cropper/

附上网址：https://blog.csdn.net/weixin_38023551/article/details/78792400

这篇文章讲的很好。

我先说一下自己的需求：就是想要实现图片裁剪的功能，并且要有预览区域，获得裁剪后的图片后点击确认后上传。

预览的页面结构、样式要自己设置，为了页面美观，可以根据裁剪框的比例来设置，根据aspectRatio这个属性，如果不设置这个属性的话，那这个属性的值就是NAN。一般还是根据需求页面需要的图片比例来设置，这样上传到服务器上的图片就是需求要求的图片了。

具体的选项介绍可以看这篇博客，我就贴一下代码吧。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <link rel="stylesheet" href="../css/cropper.css"/>
    <title>cropper 裁剪图片并上传demo</title>
    <style>
        .container {
            width: 70%;
            float: left;
        }

        .img {
            width: 50%;
        }

        .preview-box {
            width: 320px;
            height: 180px;
            overflow: hidden;
            float: right;
            margin-right: 20px;

        }
    </style>
</head>
<body>
<div class="container" id="container">
    <img src="../image/demo_img.jpg" alt="" class="img" id="demoImg"/> <!--真实项目中的路径需要动态获取用户选中图片的路径，可以采用base64编码的形式-->
</div>
<div class="preview-box"></div><!--预览框的容器-->

<script src="../js/jquery-2.1.3.min.js"></script>
<script src="../js/cropper.js"></script>
<script>
    $('#demoImg').cropper({
        aspectRatio: 16 / 9,//裁剪框比例
        viewMode: 0,//视图模式
        dragMode: 'move',//裁剪框的模式
        minCanvasWidth: 300,//canvas的最小宽度，如果不设置的话，值是0
        minCanvasHeight: 300,
        minCropBoxWidth: 400,//裁剪层的最小宽度，值为0
        minCropBoxHeight: 400,
        preview: '.preview-box'
    })
</script>
</body>
</html>

附上效果图

右侧是预览区域，左侧是裁剪区域

posted @ 2018-08-24 16:23 前端加油站阅读(2286) 评论(1) 编辑收藏举报

刷新页面返回顶部

前端加油站⛽️

cropper.js裁剪图片的使用