一 、准备工作

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. 谈一次java web系统的重构思路

    ——略谈Java web软件如何提供二次开发接口 接手公司的一个Java web软件产品,该软件采用传统的dwr框架.dwr框架相当于一个中间层,使得javascript能够识别Java类对象,进而能 ...

  2. VMware系统克隆

    第1章 搭建VMware实战环境 1.1 vmware主机配置-网络配置 1.1.1 虚拟主机添加网卡信息(5) a.右键虚拟主机→设置→添加虚拟网卡硬件设备 b.设置网络适配器类型→完成添加 1.1 ...

  3. Java 核心内容相关面试题【1】

    1.什么是 transient 变量? transient 变量是指不会被序列化的变量. 2.什么是同步(synchronization)? 在多线程环境中,同步是指控制多个线程访问共享资源的方式.没 ...

  4. C#中的Unsafe和Fixed

    托管代码 (managed code):由公共语言运行库环境(而不是直接由操作系统)执行的代码.托管代码应用程序可以获得公共语言运行库服务,例如自动垃圾回收.运行库类型检查和安全支持等.这些服务帮助提 ...

  5. 三：动态SQL

    :动态SQL 1.使用动态sql完成多条件查询 If:利用if实现简单的条件选择 Choose(when,otherwise):相当于java中的switch语句,通常与whenhe otherwis ...

  6. Python概述与安装

    Python 一门面向对象的解释性语言. Python优点 开发效率高(有丰富的各种类库,不需要重复造轮子):可移植性:解释性:免费开源:交互式(IDLE,代码写一行执行一行) Python缺点 相对 ...

  7. Maven依赖解析

    本文将记录Maven工程中依赖解析机制,内容包括: Maven依赖基本结构 从仓库解析依赖的机制 依赖传递性解析实例 1. Maven依赖基本结构 上篇文章记录了Maven依赖的聚合与继承,POM中依 ...

  8. Fis3迁移至Webpack实战

    Webpack从2015年9月第一个版本横空初始至今已逾2载.它的出现,颠覆了一大批主流构建如Ant.Grunt和Gulp等等.腾讯NOW直播IVWEB团队之前一直采用Fis构建,本篇文章主要介绍从F ...

  9. 在PostgreSQL自定义一个“优雅”的type

    是的,又是我,不要脸的又来混经验了.我们知道PostgreSQL是一个高度可扩展的数据库,这次我聊聊如何在PostgreSQL里创建一个优雅的type,如何理解优雅?大概就是不仅仅是type本身,其它 ...

  10. iOS打包静态库（完整篇）

    1. 什么是库? 所谓库就是程序代码的集合,是共享程序代码的一种方式. 2. 库的分类 根据程序代码的开源情况,库可以分为两类 开源库源代码是公开的,你可以看到具体实现.比如GitHub上比较出名的第 ...