java -- cropper裁剪图片并base64上传 移动端简单示例
2024-05-12 05:35:46
前言
cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。
cropper有两种方式上传截取的图片数据，一种是前端把裁剪的数据传到后台进行裁剪后保存，第二种是前端拿到剪裁后的数据，转成base64后上传，
后台通过二进制流上传图片信息。这里采用的是第二种方法。
1:需要引入cropper.js和cropper.css 官方下载地址 https://github.com/fengyuanchen/cropper
<link href="${BS}/css/cropper.min.css" rel="stylesheet">
<script src="${BS}/js/cropper.min.js"></script>2：注意要是传递图片的小大大于2m,可能会出现数据传递不到后台的情况，这个时候请修改tomcat 的server.xml配置，增加maxPostSize=“0”，因为tomcat设置默认的传递的数据大小不能大于2m
3：option相关参数说明：
container 容器 canvas 图片 crop 裁剪框
viewMode 显示模式
Type: Number
Default: 0
Options:
0: the crop box is just within the container 裁剪框只能在 1内移动
1: the crop box should be within the canvas 裁剪框 只能在 2图片内移动
2: the canvas should not be within the container 2图片 不全部铺满1 （即缩小时可以有一边出现空隙）
3: the container should be within the canvas 2图片 全部铺满1 （即 再怎么缩小也不会出现空隙）
dragMode 拖动模式Default: 'crop'
Options:
'crop': create a new crop box 当鼠标 点击一处时根据这个点重新生成一个 裁剪框
'move': move the canvas 可以拖动图片
'none': do nothing 图片就不能拖动了
Define the dragging mode of the cropper.
toggleDragModeOnDblclick 默认true .是否允许 拖动模式 “crop” 跟“move” 的切换状态。。即当点下为crop 模式，如果未松开拖动这时就是“move”模式。放开后又为“crop”模式
preview 截图的显示位置 型：String(jQuery选择器)，默认值''
responsive ：类型：Boolean，默认值true。是否在窗口尺寸改变的时候重置cropper。
checkImageOrigin：类型：Boolean，默认值true。默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳，及图片的重新加载。
background：类型：Boolean，默认值true。是否在容器上显示网格背景。 要想改背景，我是直接改，cropper.css样式中的 cropper-bgcanvas（图片）相关
movable：类型：Boolean，默认值true。是否允许移动图片
rotatable：类型：Boolean，默认值true。是否允许旋转图片。
scalable 默认 true 。 是否允许扩展图片。（暂时不知道干嘛用）
zoomable 默认true, 石头允许缩放图片。
zoomOnWheel 默认 true 是否允许鼠标滚轴 缩放图片
zoomOnTouch 默认true 是否允许触摸缩放图片（触摸屏上两手指操作。）
wheelZoomRatio 默认0.1 师表滚轴缩放图片比例。即滚一下。图片缩放多少。如 0.1 就是图片的10%crop(裁剪框)相关
aspectRatio 裁剪框比例 默认NaN 例如：: 1 / 1,//裁剪框比例 1：1
modal：类型：Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
cropBoxMovable :默认true ,是否允许拖动裁剪框
cropBoxResizable :默认 true,//是否允许拖动 改变裁剪框大小
autoCrop：类型：Boolean，默认值true。是否允许在初始化时自动出现裁剪框。
autoCropArea：类型：Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁框的大小。
highlight：类型：Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
guides：类型：Boolean，默认值true。是否在剪裁框上显示虚线。
center: 默认true 是否显示裁剪框 中间的+
restore : 类型：Boolean，默认值true 是否调整窗口大小后恢复裁剪区域。大小相关
minContainerWidth：类型：Number，默认值200。容器的最小宽度。
minContainerHeight：类型：Number，默认值100。容器的最小高度。
minCanvasWidth：类型：Number，默认值0。canvas 的最小宽度（image wrapper）。
minCanvasHeight：类型：Number，默认值0。canvas 的最小高度（image wrapper）。
监听触发的方法
build：类型：Function，默认值null。build.cropper事件的简写方式。 ====== 。控件初始化前执行
built：类型：Function，默认值null。built.cropper事件的简写方式。 ====== 空间初始化完成后执行
dragstart：类型：Function，默认值null。dragstart.cropper事件的简写方式。 ====== 拖动开始执行
dragmove：类型：Function，默认值null。dragmove.cropper事件的简写方式。====== 拖动移动中执行
dragend：类型：Function，默认值null。dragend.cropper事件的简写方式。====== 拖动结束执行
zoomin：类型：Function，默认值null。zoomin.cropper事件的简写方式。 ====== 缩小执行
zoomout：类型：Function，默认值null。zoomout.cropper事件的简写方式。 ====== 放大执行
4：demo 下载地址 http://download.csdn.net/download/qq_15988615/10120181
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:set var="BS" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>cropper图片裁剪案例</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="baidu-tc-cerfication" content="315f7ed10c0de83badbd33934a33aec1"><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimal-ui"><meta name="apple-mobile-web-app-capable" content="yes"><meta content="telephone=no,email=no" name="format-detection"></head><link rel="stylesheet" href="${BS}/css/swiper.min.css" media="screen" charset="utf-8"><link rel="stylesheet" href="${BS}/css/edit-image.css" media="screen" charset="utf-8"><link href="${BS}/css/cropper.min.css" rel="stylesheet"><input type="hidden" id="BS_s" value="${BS}"><body class="page-address-book "><!--背景图片显示区域--><div onclick="JavaScript:$('#inputImage').click();" style="height:70%;"><img title="点击更换背景图片" class="logo left" style="top:12%;left:42%;width:100%;height:100%" src="${BS}/images/6.jpg"></div><input style="display: none;" id="inputImage" name="file" type="file" accept="image/*">点击上面背景图片更换图片<!--图片裁剪以及智能识别区域--><div id="showEdit" class="containerImage Hide cliper_wrapper"><img id="EditImg" src=""><div class="footer-btn" style="height: 55px;"><button type="button" style="width: 130px;font-size: 20px;height: 40px;margin-top: 8px;" class="ReselectPhoto" onclick="JavaScript:$('#inputImage').click();">重选照片</button><button id="cut" type="button" style="width: 100px;font-size: 20px;height: 40px;margin-top: 8px;background-color: #3A9E9E;border: 1px solid #3A9E9E;" class="Cut">剪切</button><button id="submit" type="button" style="width: 100px;font-size: 20px;height: 40px;margin-top: 8px;" class="Cut">提交</button></div></div><script src="${BS}/js/jquery.min.js"></script><script src="${BS}/js/cropper.min.js"></script></body>
</html>js部分
<script>$(function () { 'use strict';//表示强规则 var Cropper = window.Cropper; var console = window.console || { log: function () {} };var URL = window.URL || window.webkitURL;var $image = $('#EditImg');//获取图片截取的位置var screenWidth = $(window).width(); var screenHeight = $(window).height(); var $dataX = $('#dataX');var $dataY = $('#dataY');var $dataHeight = $('#dataHeight');var $dataWidth = $('#dataWidth');var $dataRotate = $('#dataRotate');var $dataScaleX = $('#dataScaleX');var $dataScaleY = $('#dataScaleY');var options = {containerHeight : screenWidth, containerWidth : screenHeight, guides :true,//裁剪框虚线 默认true有 aspectRatio: 1 / 1, //裁剪框比例1:1responsive : true,// 是否在窗口尺寸改变的时候重置cropperbackground : true,// 容器是否显示网格背景 zoomable : true,//是否允许放大缩小图片movable : false,//是否允许移动剪裁框resizable : false,//是否允许改变剪裁框的大小cropBoxMovable :false,//是否允许拖动裁剪框 cropBoxResizable :false,//是否允许拖动 改变裁剪框大小 crop: function (e) {$dataX.val(Math.round(e.x));$dataY.val(Math.round(e.y));$dataHeight.val(Math.round(e.height));$dataWidth.val(Math.round(e.width));$dataRotate.val(e.rotate);$dataScaleX.val(e.scaleX);$dataScaleY.val(e.scaleY);}};$('#EditImg').cropper(options);// Optionsvar originalImageURL = $image.attr('src');var uploadedImageURL;var $inputImage = $('#inputImage');URL = window.URL || window.webkitURL;var blobURL;if (URL) {$inputImage.change(function () {var files = this.files,file;if (files && files.length) {file = files[0];if (/^image\/\w+$/.test(file.type)) {blobURL = URL.createObjectURL(file);$image.one('built.cropper', function () {URL.revokeObjectURL(blobURL); // Revoke when load complete}).cropper('reset', true).cropper('replace', blobURL);//$inputImage.val('');$("#showEdit").removeClass('Hide');} else {//alert('Please choose an image file.');}}});} else {$inputImage.parent().remove();}//裁剪图片$("#cut").on("click", function () {var dataURL = $image.cropper("getCroppedCanvas"); var imgurl = dataURL.toDataURL("image/*", 0.5); $image.cropper('destroy').attr('src', imgurl).cropper(options);});//提交图片$("#submit").on("click", function () {var accessory = $('#inputImage').val();if (typeof accessory == "null"){ alert("is null"); return ;} var accessoryName = accessory.substring(accessory.lastIndexOf("\\")+1,accessory.length);//截取原文件名var dataURL = $image.cropper("getCroppedCanvas");//拿到剪裁后的数据 var data = dataURL.toDataURL("image/*", 0.5);//转成base64if (typeof data == "null"){ alert("is null"); return ;} var BS_s = $("#BS_s").val();$.ajax({ url: BS_s+"/wxFirst/uploadImgBase", dataType:'json', type: "POST", data: {fileName : accessoryName,imgBase64 : data.toString()}, timeout : 10000, //超时时间设置，单位毫秒 async: true, success: function (result) { }, error: function (returndata) { } }); });});</script>后台部分
/*** 上传图片* @param id* @return*/@RequestMapping("/uploadImgBase")@ResponseBodypublic Map<String, String> uploadImgBase(@RequestParam(value="imgBase64",defaultValue="") String imgBase64,@RequestParam(value="fileName",defaultValue="") String fileName,HttpServletRequest request,HttpServletResponse response){String TrueDirectory = "ImgFiles"+File.separator+"backgroundImg";String inventedDirectory = "ImgFiles/"+"backgroundImg";String directory = TrueDirectory+"-"+inventedDirectory;Map<String, String> map = ImageUtil.uploadImgBase64(request,imgBase64, directory, fileName);return map;}/** * 上传base64 单个图片工具类 * @param imgBase64 图片base64 * @param fileName 图片名称 * @return */ public static Map<String, String> uploadImgBase64(HttpServletRequest request,String imgBase64,String Directory,String oldFileName){ Map<String, String> uploadImageMap = new HashMap<String, String>();String oldFileName2 = oldFileName.substring(0,oldFileName.lastIndexOf("."));String lastFileName = oldFileName.substring(oldFileName.lastIndexOf("."),oldFileName.length());String fileName = oldFileName2+System.currentTimeMillis()+lastFileName;// 重命名上传后的文件名uploadImageMap.put("oldFileName", oldFileName);//上传本地tomcat路径String path = request.getSession().getServletContext().getRealPath("/") + Directory.split("-")[0] + File.separator+ fileName;String filePath = request.getSession().getServletContext().getRealPath("/") + Directory.split("-")[0];//上传服务器路径String phoUrl = "/" + Directory.split("-")[1]+"/" + fileName;String header ="data:image"; String[] imageArr=imgBase64.split(","); if(imageArr[0].contains(header)){//是img的 // 去掉头部 imgBase64=imageArr[1]; //image = image.substring(header.length()); // 写入磁盘 BASE64Decoder decoder = new BASE64Decoder(); try{ byte[] decodedBytes = decoder.decodeBuffer(imgBase64); //将字符串格式的image转为二进制流（biye[])的decodedBytes File targetFile = new File(filePath); if(!targetFile.exists()){ targetFile.mkdirs(); } FileOutputStream out = new FileOutputStream(path); //新建一个文件输出器，并为它指定输出位置imgFilePath out.write(decodedBytes); //利用文件输出器将二进制格式decodedBytes输出 out.flush(); out.close(); //关闭文件输出器 uploadImageMap.put("success", "上传文件成功！");uploadImageMap.put("path", path);uploadImageMap.put("phoUrl", phoUrl);return uploadImageMap; }catch(Exception e){uploadImageMap.put("err", "上传文件失败！"); return uploadImageMap; }}else{uploadImageMap.put("err", "上传文件失败！");return uploadImageMap; } } 效果图
java -- cropper裁剪图片并base64上传 移动端简单示例相关推荐
- Vue - 实现图片裁剪功能，并上传到服务器（内置第三方最优秀的裁剪图片组件，上传到服务器功能）干净整洁无 BUG 的示例源码与超详细的注释，兼容任意浏览器
前言 您可以滑动到文章最底部,直接克隆完整示例 Gitee 仓库,与本文教程最终效果一致. 在项目开发中,您难免会遇到图片上传到服务器之前,用户可进行裁剪的需求, 在看了网上大部分教程后,代码都非常乱 ...
- js 裁剪图片压缩并且上传 图片
今天接到一个比较懒的后台的要求:后台要求在裁剪图片的同时,根据文件大小来按不同比例压缩图片. 页面代码 <!--** * *----------Created by 黄伟峰 on 2018/6/ ...
- 图片转Base64上传至服务器
前言 1.将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方. 2.假定生成的 ...
- uni-app 压缩图片（base64上传）包含图片验证
第一步选择图片 data(){return{imageType: ['image/png', 'image/jpeg', 'image/jpg'],//图片验证类型} }uni.chooseImage ...
- jquery实现截取pc图片_Cropper.js 实现裁剪图片并上传(PC端)
由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器,所以上网查询了很多资料,也试用了许多案例,发现cropper插件裁剪是比较完善的,所以结合之前的使用情况,编写了此案例.本案例是参考 ...
- java实现七牛云图片文件的上传
java实现七牛云图片文件的上传 七牛云:https://portal.qiniu.com/create#resource 首先需要去注册一个账号实现实名认证 之后打开七牛云的 我们需要先创建一个储存 ...
- java实现后台直接生成二维码图片并直接上传到七牛云上面
java实现后台直接生成二维码图片并直接上传到七牛云上面 需求:后台是直接根据唯一核销码生成图片,然后的话直接上传到七牛云,数据库只是保存地址,一开始也想错了,想成了创建临时文件存储生成的图片再上传到 ...
- 图片裁切，上传，自动匹配颜色。
图片裁切,上传,自动匹配颜色. photoclip插件学习. https://github.com/baijunjie/PhotoClip.js是官方文档. 使用方法很简单.不过我在使用的过程中遇到几 ...
- H-ui.admin v3.1多图片预览上传的问题解决
H-ui.admin v3.1多图片预览上传的问题解决 这个模板的多图片上传我搞了好久,之前忙的时候都放弃了模板给的多图片上传,现在有时间研究下终于解决了,话不多说上代码. (function( $ ...
最新文章
- CVPR 2021论文分享会日程公布！
- Android API Demo程序框架
- Spring配置文件简介
- php-fpm7.0,php-fpm7.0 慢查询设置及说明
- word公式插件_再也不用担心我的公式写不出来了：一款公式输入神器实测
- 通过改变innerHTML的内容，动态增加选择项
- HuggingFace学习1：tokenizer学习与将文本编码为固定长度（pytorch）
- 原生ajax的post方法,原生js实现ajax及get post方法
- 启用了不安全的 HTTP 方法
- shell split分析日志文件
- 光标右侧小圆圈一直闪，输入法一直不停中英文切换
- 红米note9pro和华为nova7哪个好
- vulnhub——Earth靶机
- 【设计模式】五：依赖倒置与里氏代换原则
- 读 Steven J. Leon 之《线性代数》
- 上网时出现“出现了运行时间错误。是否进行调试”
- python调用usb摄像头_Python通过cv2读取多个USB摄像头
- android扫条形码功能,详解Android 扫描条形码（Zxing插件）
- 测试开发技能：java语言之浮点数运算
- 【计算机网络实验】多区域OSPF配置实验