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

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

官网地址：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. $.ajax()方法详解（转）

    以下内容转自:http://www.cnblogs.com/tylerdonet/p/3520862.html   尊重原创,请访问原创文章 jquery中的ajax方法参数总是记不住,这里记录一下. ...

  2. Python中进度条如何实现

    print源码,参数end默认值为换行符,需要置成空,就会实现打印一行的效果 import time for i in range(100): time.sleep(1)#sleep一秒再输出 # 需 ...

  3. Mybatis_笔记_01_逆向工程

    通过Mybatis逆向工程,可以从数据库中的表自动生成pojo.mapper映射文件和mapper接口 此处暂存怎么使用逆向工程,原理以后再探讨 工程结构 要修改的地方:generatorConfig ...

  4. tensorflow CUDA 9.0安装成功

    berli@berli-dev:~/tensorflow$ bazel-bin/tensorflow/examples/label_image/label_image 2017-12-18 00:04 ...

  5. URI is not registered (Settings | Languages & Frameworks | Schemas and DTDs)

    解决:鼠标悬于上方Alt + Enter 选择Ignore

  6. 原来问题在这里-我的memory leak诊断历程

    自从公司开始将java作为主要开发语言后,C++与java的混合应用日趋增多. java与C++的通信主要也是使用JNI来完成,这并没有什么问题.对于这样的混合应用项目来说,最大的噩梦莫过于memor ...

  7. Oracle 12c 多租户 CDB 与 PDB 级别 expdb 与 impdb（表、用户、全库）

    Oracle 数据库 12 c 多租户下,如何在容器数据库 (CDB) 和可插拔数据库 (PDB) 中使用 expdb 与 impdp (数据泵) 呢? 我们一起探讨下PDB 下进行表级,用户级别,全 ...

  8. 洛谷【P3379】【模板】最近公共祖先（LCA）

    浅谈\(RMQ\):https://www.cnblogs.com/AKMer/p/10128219.html 题目传送门:https://www.luogu.org/problemnew/show/ ...

  9. Shiro 权限管理filterChainDefinitions过滤器配置

    博客转载:http://blog.csdn.net/userrefister/article/details/47807075 /** * Shiro-1.2.2内置的FilterChain * @s ...

  10. 【转】 Pro Android学习笔记（四二）：Fragment（7）：切换效果

    目录(?)[-] 利用setTransition 利用setCustomAnimations 通过ObjectAnimator自定义动态效果 程序代码的编写 利用fragment transactio ...