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

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

官网地址：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. SpringBoot_05_热部署和debug

    一.pom.xml配置 增加以下pom.xml配置 <!--1.spring-boot插件--> <plugin> <groupId>org.springframe ...

  2. codeforces 710B B. Optimal Point on a Line(数学)

    题目链接: B. Optimal Point on a Line 题意: 给出n个点,问找出一个点使得这个点到所有的点的距离和最小; 思路: 所有点排序后的中位数;这是一个结论; AC代码: #inc ...

  3. 洛谷【P1104】生日（插入排序版）

    题目传送门:https://www.luogu.org/problemnew/show/P1104 题目很简单,我主要是来讲插入排序的. 所谓插入排序,就是从待排序数组不断将数据插入答案数组里. 假设 ...

  4. HDOJ(1069)最长下降子序列

    每个箱子可有3种叠加方式,所以有3*n个箱子.将箱子按长度由大到小排序,有求箱子按宽度的最长下降子序列的高度之和即可. #include<cstdio> #include<algor ...

  5. C语言中clock函数的使用

    #include<cstdio> #include<cstdlib> #include<ctime> using namespace std; int main() ...

  6. 彻底删除kafka下面的topic

    如果只是用kafka-topics.sh的delete命令删除topic,会有两种情况: 如果当前topic没有使用过即没有传输过信息:可以彻底删除 如果当前topic有使用过即有过传输过信息:并没有 ...

  7. 四种生成和解析XML文档的方法介绍

    解析XML的方法越来越多,但主流的方法也就四种,即:DOM.SAX.JDOM和DOM4J 1.DOM(Document Object Model) DOM是用与平台和语言无关的方式表示XML文档的官方 ...

  8. centos 7之文件共享

    一,安装过程 1.在VirtualBox的软件菜单里面选择 “设备”--“存储”,添加VBoxGuestAdditions.iso(在VirtualBox目录下).      2.在桌面上出现一个光驱 ...

  9. Elasticsearch2.x --DeleteByQuery

    一.安装插件 要删除某个索引的一个type下的所有文档,相当于关系型数据库中的清空表操作.查阅了一些资料可以通过Delete-by-Query插件删除,首先使用插件管理器安装Delete-by-Que ...

  10. 从Github远程库安装Node.JS

    3)从Github远程库安装Node.JS在这个方法中我们需要一些步骤来把Node.js的从Github上的远程的仓库克隆到本地仓库目录 在开始克隆(克隆)包到本地并且配制之前,我们要先安装以下依赖包 ...