node.js平台下,cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 、准备工作
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发送至服务端。的更多相关文章
- cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
- JavaScript实现图片裁剪预览效果~(第一个小玩具)
感觉开始学习的前一个月真的太不珍惜慕课网的资源了 上面蛮多小玩意真的蛮适合我这样刚入门JavaScript的同学加深使用理解 大概收藏了百来门或大或小的课程 有一个感觉就是学这个真的比光是看书看概 ...
- Java实现图片裁剪预览功能
在项目中.我们须要做些类似头像上传,图片裁剪的功能,ok看以下文章! 须要插件:jQuery Jcrop 后端代码: package org.csg.upload; import java.awt.R ...
- node.js平台下,利用cookie实现记住密码登陆(Express+Ejs+Mysql)
本博文需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.就是博文: 1.下载Mysql数据库,安装并配置 创建用户表供登录使用: 2.node.js平台 ...
- JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- js实现FileUpload选择图片后预览功能
当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...
- JavaScript实现本地图片上传前进行裁剪预览
本项目支持IE8+,测试环境IE8,IE9,IE10,IE11,Chrome,FireFox测试通过 另:本项目并不支持Vue,React等,也不建议,引入JQuery和Vue.React本身提倡的开 ...
- jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
- 图片本地预览 flash html5
dataURI 一种能够在页面嵌入外部资源的URI方案.能够降低图片或者样式表的http请求数量,提高效率. ie8把dataURI 的属性值限制在32k以内. 图片本地预览: 由于安全原因,通过fi ...
随机推荐
- Adobe Audio 分轨录音教程(需要KX,Live机架)
一.需要的硬件和软件 1. 创新5.1声卡或7.1声卡: 2. 已安装KX驱动和Live机架,经过测试安装后需要重启电脑才能生效. 3. 已安装Adobe Audition 3.0 二.测试环境 WI ...
- EasyUI扩展验证
1.首先在jquery.easyui.min.js下最后插入下面代码 $.extend($.fn.validatebox.defaults.rules, { idcard : {// 验证身份证 va ...
- 我眼中的WebViewJavascriptBridge
周六阳光明媚的早晨,非常适合整理和分享一些以前玩过的东西.曾经的工作中参与过一段时间iOS开发,在开发中有个小小的框架让我非常深刻,就是WebViewJavascriptBridge,用于原生控件与前 ...
- 运维必须掌握的150个Linux命令
线上查询及帮助命令(1个)man 目录操作命令(6个)ls tree pwd mkdir rmdir cd 文件操作命令(7个)touch cp mv rm ln find rename 文件查看及处 ...
- java面向对象的构造函数
当使用new来创建一个对象的时候,其实是调用了一个函数,这个函数的名称叫做构造函数 构造函数的特点: 1.构造函数的名称必须和类名完全一致,包括大小写. 2.构造函数不写返回值,不写返回值意味着连vo ...
- 使用duilib开发简单的Window安装包
一.具体思路 安装过程:安装包的制作包括资源文件的打包,资源文件打包到安装包exe中,安装的时候需要从exe中提取出对应的资源文件, 然后解压文件安装到指定目录,然后就是对安装的可执行程序进行注册表的 ...
- 如何用while循环 输出一个九九乘法表
方法一 i = 1 while i < 10: k = 1 while k <= i: print('%d*%d=%2d '% (i,k,i*k),end='') #end='' 表示不换 ...
- 基于docker+reveal.js搭建一个属于自己的在线ppt网站
前言 最近热衷于Docker,由于这段时间使用Docker来折腾自己的服务器,越来越感觉这是一种及其被应该推广的技术,因此想在公司内部也做一次技术分享.当然,如果只是做的PPT,我就不写这文章了.既然 ...
- tcp并发服务器(c20w)
** 原创文章,请勿转载 ** 并发服务器是一个老生常谈的话题,今天这里也写一个. 1. 目标: 同时在线连接20万(c20w). 开发语言:重要的事情说三遍,GOLANG, GOLANG, GOLA ...
- h5前端流行的框架
很多时候别人问你,上手的框架有哪些,其实我们都是知道的,只是一时却也说不上哪些比较,这里想给大家介绍一下,我所遇到的,还算好用的框架,做个分享 1 Bootstrap 官网:http://getboo ...