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

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

官网地址：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. 关于IDT报错乱码总结

    可算是把我折腾坏了.一筹莫展.最后才把这些问题搞好.有些事不知道做以前,怎么都想不到.发现了方法之后,原来也不过这样.我觉得自己记性太差.还是好好写下来吧.写下来顺便会帮我重新再梳理一遍.原先乱码是因 ...

  2. SSH三大框架的搭建整合（struts2+spring+hibernate）(转)

    原文地址:http://blog.csdn.net/kyle0349/article/details/51751913  尊重原创,请访问原文地址 SSH说的上是javaweb经典框架,不能说100% ...

  3. adb命令（一）

    针对移动端 Android 的测试, adb 命令是很重要的一个点,必须将常用的 adb 命令熟记于心, 将会为 Android 测试带来很大的方便,其中很多命令将会用于自动化测试的脚本当中. And ...

  4. hadoop_异常_01_ Unable to determine address of the host-falling back to "localhost" address java.net.UnknownHostException: rayner

    一.异常现象 安装好hadoop之后,执行格式化namenode命令时,抛出以下异常: // :: WARN net.DNS: Unable to determine local hostname - ...

  5. BEC listen and translation exercise 42

    These were built for the workers towards the end of the eighteenth century, and they are still furni ...

  6. 2017人工智能元年，AI在喧嚣和质疑中一路走来

    前百度首席科学家吴恩达说:就像100年前的电力.20年前的互联网一样,AI也会改变每一个产业! 有人说,现在就像1995年,那一年,第一家互联网公司--网景上市,一天之内大涨208%,互联网正式登上历 ...

  7. 根据sid或sqlID查询SQL

    根据sid查询已经执行过的sql select sql_text from v$sqlarea a,v$session b where a.SQL_ID=b.PREV_SQL_ID and b.SID ...

  8. druid数据源的加密解密工具

    数据库得加密 先来一个网上大多数的教程吧,一个比较好的教程,如下. jar包版本:druid-1.0.13.jar 1. 加密,用以下命令将用户名和密码加密 cmd命令行执行 java -cp D:/ ...

  9. Debain install Jupyter

    1. install Anaconda https://www.anaconda.com/download/#linux 2. config jupyter $ ipython from notebo ...

  10. 5.JasperReports学习笔记5-其它数据生成动态的报表（WEB）

    转自:http://www.blogjava.net/vjame/archive/2013/10/12/404908.html 一.空数据(Empty Datasources) 就是说JRXML文件里 ...