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

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

官网地址：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. 验证reg注册表的操作

    // wRegKeyclass wRegKey{ // Operationspublic: BOOL Create(HKEY hKeyParent, LPCTSTR lpszKeyName , LPT ...

  2. Selenium-js弹窗浮层

    学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性 ...

  3. JavaWEB - 静态include指令、动态Include指令

    (一)使用静态include指令 <%@ page language="java" contentType="text/html; charset=gb2312&q ...

  4. 什么是DMIPS

    MIPS: Million Instructions executed Per Second,每秒百万条指令,用来计算同一秒内系统的处理能力 DMIPS: Dhrystone Million Inst ...

  5. 继续学习C：数字进制表示

    1. 数字后面跟D表示十进制,如:123D. 2. 数字后面跟B表示二进制,如:10010B. 3. 数字后面跟Q表示八进制,如:652Q. 4. 数字后面跟H表示十六进制,如:2B5H. 把十进制数 ...

  6. RTP Payload Format for Opus Speech and Audio Codec

    [Docs] [txt|pdf] [Tracker] [WG] [Email] [Diff1] [Diff2] [Nits] Versions: (draft-spittka-payload-rtp- ...

  7. 【LeetCode】024. Swap Nodes in Pairs

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  8. js中eval详解

    先来说eval的用法,内容比较简单,熟悉的可以跳过   eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. ...

  9. bzoj 4066 & bzoj 2683 简单题 —— K-D树(含重构)

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4066 https://www.lydsy.com/JudgeOnline/problem.p ...

  10. 数据库管理员（Database Administrator，简称DBA）基本知识:

    数据库管理员(Database Administrator,简称DBA)基本知识: 一.数据库基础 1. 数据抽象:物理抽象.概念抽象.视图级抽象,内模式.模式.外模式 2. SQL语言包括数据定义. ...