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

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

官网地址：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>

附上效果图

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

cropper.js裁剪图片的使用的更多相关文章

  1. Vue中使用Cropper.js裁剪图片

    Cropper.js是一款很好用的图片裁剪工具,可以对图片的尺寸.宽高比进行裁剪,满足诸如裁剪头像上传.商品图片编辑之类的需求. github: https://github.com/fengyuan ...

  2. cropper.js 裁剪图片

    https://blog.csdn.net/weixin_38023551/article/details/78792400

  3. 基于cropper.js的图片上传和裁剪

    项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...

  4. js 裁剪图片

    js 裁剪图片 https://gugeji.com/search?q=js剪切图片

  5. node.js平台下，cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  6. cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  7. H5项目 使用Cropper.js 实现图片 裁剪 操作 (APP端)

    参考地址: 1.https://www.jianshu.com/p/b252a7cbcf0b 2.https://blog.csdn.net/weixin_38023551/article/detai ...

  8. 基于layui+cropper.js实现上传图片的裁剪功能

    最近因项目需求,需要在上传图片的时候先对图片裁剪,然后在上传,所以就有了本文的出现. 开始正文之前,要提一下这个图片的裁剪:图片的裁剪,有前端裁剪,也可以后端裁剪 前端的裁剪我知道的可以分为这么两种: ...

  9. cropper.js移动端使用

    cropper.js移动端使用 一.总结 一句话总结: 启示:找对关键词,找对相关方面的应用,效果真的非常好 比如 cropper.js移动端使用,这样设置了(dragMode: 'move',//拖 ...

随机推荐

  1. javaScript-进阶篇(一)

    1.变量 1.必须以字母.下划线或美元符号开头,后面可以跟字母.下划线.美元符号和数字. 2.变量名区分大小写,如:A与a是两个不同变量. 3.不允许使用JavaScript关键字和保留字做变量名. ...

  2. C语言逗号运算符和逗号表达式

    在C语言中逗号","也是一种运算符,称为逗号运算符. 其功能是把两个表达式连接起来组成一个表达式, 称为逗号表达式.其一般形式为:表达式1,表达式2 其求值过程是分别求两个表达式的 ...

  3. FEC之我见二

    前面简单说了一下FEC,以及它的配合使用的方法.下面我想详细说一下FEC算法: 曾经有位大神在帖子里这么写着:采用改进型的vandermonde矩阵RS算法.其优点算法运算复杂度更低且解决了利用矩阵构 ...

  4. Java面试题10(如何取到set集合的第一个元素)

    1.如何取到set集合的第一个元素. public static void main(String[] args) { Set set = new HashSet(); set.add("x ...

  5. ACM学习历程—HDU4417 Super Mario(树状数组 && 离线)

    Problem Description Mario is world-famous plumber. His “burly” figure and amazing jumping ability re ...

  6. codevs1060 搞笑世界杯

    题目描述 Description 随着世界杯小组赛的结束,法国,阿根廷等世界强队都纷纷被淘汰,让人心痛不已. 于是有 人组织了一场搞笑世界杯,将这些被淘汰的强队重新组织起来和世界杯一同比赛.你和你的朋 ...

  7. git导入项目

    远程仓库已经存在,使用的是gitblit,作为终端eclipse如何从中拷贝代码呢? 0.准备工作,windows->preference->team->git->config ...

  8. findBug 错误修改指南

      1. EC_UNRELATED_TYPESBug: Call to equals() comparing different types Pattern id: EC_UNRELATED_TYPE ...

  9. Velocity的layout功能

    一.从VelocityViewServlet到VelocityLayoutServlet 使用Velocity开发web应用时,需要在web.xml中配置一个Velocity提供的VelocityVi ...

  10. SciTE for Ruby的配置

    转自:http://my.oschina.net/xsinger/blog/14229?catalog=71266 下载下面这个文件:http://scintilla.sourceforge.net/ ...