一 、准备工作

1.首先需要先下载cropper,常规使用npm，进入项目路径后执行以下命令：

npm install cropper

2. cropper基于jquery，在此不要忘记引入jq,同时记得引入cropper.css

3. 此处后端使用的nodejs，不过不懂node的影响也不大。

二 、 图片裁剪并预览

1.首先利用cropper完成图片裁剪并预览：

    <input type="file" name="" id="imgBtn" name="imgCut">

    <!-- 预览容器-->

    <div class="box">

        <img src="" id="preview">

    </div>

    <!-- 点击上传按钮裁剪-->

    <input type="button" name="" value="上传" onclick="imgSubmit()">        
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript" src="../js/cropper.min.js"></script>
<script>

        //生成裁剪区域

    $("#imgBtn").change(function(e){

        var file = $("#imgBtn").get(0).files[0];

        var reader = new FileReader();

        reader.readAsDataURL(file);

        reader.onload=function(e){

            alert('文件读取完成');

            $("#preview").attr("src",e.target.result)

            var $img = $("#preview");

            $('.box > img').cropper({

                aspectRatio: 16 / 9,

                crop: function(data) {

                }

            });

        }

    })

        //预览裁剪后的图片

    function imgSubmit(){

        var result= $('.box > img').cropper("getCroppedCanvas");

        document.body.appendChild(result);

    }    
</script>

裁剪并预览的完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="../css/cropper.min.css">

    <style type="text/css">

        .box{

            width: 600px;

            height: 600px;

            border:5px solid #555fff;

            border-radius: 10px;

        }

    </style>

</head>

<body>

<input type="file" name="" id="imgBtn" name="imgCut">

<!-- 预览容器-->

<div class="box">

    <img src="" id="preview">

</div>

<!-- 点击上传按钮裁剪-->

<input type="button" name="" value="上传" onclick="imgSubmit()">

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript" src="../js/cropper.min.js"></script>

<script>

    //生成裁剪区域

    $("#imgBtn").change(function(e){

        var file = $("#imgBtn").get().files[];

        var reader = new FileReader();

        reader.readAsDataURL(file);

        reader.onload=function(e){

            alert('文件读取完成');

            $("#preview").attr("src",e.target.result)

            var $img = $("#preview");

            $('.box > img').cropper({

                aspectRatio:  / ,

                crop: function(data) {

                }

            });

        }

    })

    //预览裁剪后的图片

    function imgSubmit(){

        var result= $('.box > img').cropper("getCroppedCanvas");

        document.body.appendChild(result);

    }

</script>

</body>

</html>

三、图片裁剪预览后以base64发送至服务端

此处后端使用nodejs，没有基础的可以看我之前的nodejs文章。

前端页面如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="../css/cropper.min.css">

    <style type="text/css">

        .box{

            width: 600px;

            height: 600px;

            border:5px solid #555fff;

            border-radius: 10px;

        }

    </style>

</head>

<body>

<form>

    <input type="file" name="" id="imgBtn" name="imgCut">

    <div class="box">

        <img src="" id="previewyulan">

    </div>

    <input type="button" name="" value="上传" onclick="imgSubmit()">

</form>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript" src="../js/cropper.min.js"></script>

    <script type="text/javascript">

    $("#imgBtn").change(function(e){

        var file = $("#imgBtn").get(0).files[0];

        var reader = new FileReader();

        reader.readAsDataURL(file);

        reader.onload=function(e){

            alert('文件读取完成');

            $("#previewyulan").attr("src",e.target.result)

            var $img = $("#preview");

            $('.box > img').cropper({

                aspectRatio: 16 / 9,

                crop: function(data) {

                    //转换为base64

                    // var $imgData=$img.cropper('getCroppedCanvas')

                   //   var dataurl = $imgData.toDataURL('image/png');

                    //  $("#previewyulan").attr("src",dataurl)

                }

            });

        }

    })

    function imgSubmit(){

        //获取裁剪后的canvas对象

        var result= $('.box > img').cropper("getCroppedCanvas");

        //将canvas对象转换为base64

        var dataurl =result.toDataURL('image/png');

        document.body.appendChild(result);

        //发起post请求

        var data = "img="+dataurl+"";

        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function(event){

            if(xhr.readyState == 4){    //4:解析完毕

                if(xhr.status == 200){    //200:正常返回

                    console.log(xhr)

                }

            }

        };

        xhr.open('POST','imgCut',true);    //true为异步

        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

        xhr.send(data);

    }

    </script>

</body>

</html>

路由拦截：

app.post("/html/imgCut",function(req,res){

    console.log(req.body.img);

    //此处省略详细的后端逻辑代码

    res.send();

})

有需要可以留言。

cropper.js实现图片裁剪预览并转换为base64发送至服务端。的更多相关文章

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

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

  2. 使用JCrop进行图片裁剪，裁剪js说明，裁剪预览，裁剪上传，裁剪设计的图片处理的工具类和代码

     1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那 ...

  3. JavaScript实现图片裁剪预览效果~（第一个小玩具）

    感觉开始学习的前一个月真的太不珍惜慕课网的资源了  上面蛮多小玩意真的蛮适合我这样刚入门JavaScript的同学加深使用理解 大概收藏了百来门或大或小的课程  有一个感觉就是学这个真的比光是看书看概 ...

  4. Java实现图片裁剪预览功能

    在项目中.我们须要做些类似头像上传,图片裁剪的功能,ok看以下文章! 须要插件:jQuery Jcrop 后端代码: package org.csg.upload; import java.awt.R ...

  5. pdf.js实现图片在线预览

    项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...

  6. js 实现图片实时预览

    <body> 上传图片: <input type="file" name="file" style="width: 200px; h ...

  7. js实现图片实时预览

    注: 此博客转自 http://www.cnblogs.com/goody9807/p/6064582.html  转载请注明出处 <body> 上传图片: <input type= ...

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

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

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

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

随机推荐

  1. 异步消息处理机制Handler

    Android 中的异步消息处理主要由四个部分组成,Message.Handler.MessageQueue 和Looper. 1. Message Message 是在线程之间传递的消息,它可以在内 ...

  2. bzoj千题计划258：bzoj3123: [Sdoi2013]森林

    http://www.lydsy.com/JudgeOnline/problem.php?id=3123 启发式合并主席树 #include<cmath> #include<cstd ...

  3. 深度学习 vs. 概率图模型 vs. 逻辑学

    深度学习 vs. 概率图模型 vs. 逻辑学 摘要:本文回顾过去50年人工智能(AI)领域形成的三大范式:逻辑学.概率方法和深度学习.文章按时间顺序展开,先回顾逻辑学和概率图方法,然后就人工智能和机器 ...

  4. php银行卡校验

    前言银行金卡,维萨和万事达.银联品牌,如果是贷记卡或准贷记卡,一定为16位卡号.而借记卡可以16-19位不等.美国运通卡则不论金卡或是白金卡.普通卡,都是15位卡号.16-19 位卡号校验位采用 Lu ...

  5. HDU 2073 无限的路 （模拟）

    题目链接 Problem Description 甜甜从小就喜欢画图画,最近他买了一支智能画笔,由于刚刚接触,所以甜甜只会用它来画直线,于是他就在平面直角坐标系中画出如下的图形: 甜甜的好朋友蜜蜜发现 ...

  6. C - Balanced Number HDU - 3709 （数位dp）

    题目链接:https://cn.vjudge.net/contest/278036#problem/C 题目大意:手首先是T组数据,然后每一次输入两个数l,r,求这个区间里面满足以某个数字为中心的两侧 ...

  7. 315道Python面试题答案

    目录 Python基础篇 1:为什么学习Python 2:通过什么途径学习Python 3:谈谈对Python和其他语言的区别 Python的优势: 4:简述解释型和编译型编程语言 5:Python的 ...

  8. 【转载】chmod命令详解

    查看linux文件的权限:ls -l 文件名称 查看linux文件夹的权限:ls -ld 文件夹名称(所在目录) 修改文件及文件夹权限: sudo chmod -(代表类型)×××(所有者)×××(组 ...

  9. Linux获取/dev/input目录下的event对应的设备【转】

    转自:https://blog.csdn.net/qq_21792169/article/details/51458855 当我们在Linux操作系统下使用input子系统时,当我们先插鼠标,在插上摄 ...

  10. mydumper安装及使用

    mydumper 官网:https://launchpad.net/mydumper 安装方式: 1.yum install glib2-devel mysql-devel zlib-devel pc ...