一 、准备工作

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();

})

有需要可以留言。

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

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

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

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

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

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

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

  4. node.js平台下，利用cookie实现记住密码登陆（Express+Ejs+Mysql）

    本博文需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.就是博文: 1.下载Mysql数据库,安装并配置 创建用户表供登录使用: 2.node.js平台 ...

  5. JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  6. js实现FileUpload选择图片后预览功能

    当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...

  7. JavaScript实现本地图片上传前进行裁剪预览

    本项目支持IE8+,测试环境IE8,IE9,IE10,IE11,Chrome,FireFox测试通过 另:本项目并不支持Vue,React等,也不建议,引入JQuery和Vue.React本身提倡的开 ...

  8. jQuery Lightbox图片放大预览

    简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

  9. 图片本地预览 flash html5

    dataURI 一种能够在页面嵌入外部资源的URI方案.能够降低图片或者样式表的http请求数量,提高效率. ie8把dataURI 的属性值限制在32k以内. 图片本地预览: 由于安全原因,通过fi ...

随机推荐

  1. Linux学习（二十）软件安装与卸载（三）源码包安装

    一.概述 源码包安装的优点在于它自由程度比较高,可以指定目录与组件.再有,你要是能改源码也可以. 二.安装方法 步骤 1.从官网或者信任站点下载源码包 [root@localhost ~]# wget ...

  2. maven项目导出依赖的Jar包以及项目本身以jar包形式导出详细教程

    一.maven项目已jar包形式导出 1.首先右键项目,选择Export 2.选择好项目,设置导出路径和jar名字即可: 二.导出maven项目所依赖的所有jar包 1.右键项目,选择Export 2 ...

  3. 从java1到java9每个版本都有什么新特性？

    每次出新版本,大家大概都会这么问,"Java X会有什么特性呢?" .在下面的内容里,我总结了至今为止的Java主要发行版中各自引入的新特性,这样做的目的是为了突出各个新特性是在哪 ...

  4. 很考验人的java内存加载面试题

    源代码如下,求结果 public class MemoryAnalyse { public static int k = 0; public static MemoryAnalyse t1 = new ...

  5. Python之函数返回多个值

    #!/usr/bin/env python26 #-*- coding:utf-8-*- def test(): a = 10 b = 20 return a,b #返回一个元组 atuple= te ...

  6. 准备冲锋 golang入坑系列

    史前摘要: 本来想写读前必读,但连续几篇博文都写读前必读,感觉就没有了新意. 所以换成史前摘要,反正是一个意思. 此摘要的目的仍然是提醒点击而来的同学,本系列最新文章在这里.放到博客园的目的是为了方便 ...

  7. Runtime的理解与实践

    Runtime是什么?见名知意,其概念无非就是"因为 Objective-C 是一门动态语言,所以它需要一个运行时系统--这就是 Runtime 系统"云云.对博主这种菜鸟而言,R ...

  8. 【Java框架型项目从入门到装逼】第三节 - 如何用Tomcat发布web项目？

    啥叫Tomcat?有道词典是这么说的. 这个我们姑且不管,实际上呢,Tomcat是一种Web服务器,我们自己做好了一个Web项目,就可以通过Tomcat来发布.服务器呢,又分为硬件服务器和软件服务器. ...

  9. mysql 5.7.13 安装配置方法图文教程(linux) (转)

    http://www.jb51.net/article/87160.htm ************************************************ linux环境Mysql ...

  10. 万能动态库调用工具IDMA（InvokeDllMethodsAdvance）

    万能动态库调用工具IDMA 开发者:马兆瑞     QQ/微信:624762543 百度云下载链接:https://pan.baidu.com/s/1skW5W4H CSDN下载链接:http://d ...