上传图片支持剪切图片前后台代码

来源：互联网发布：大学生整容知乎编辑：程序博客网时间：2024/04/28 16:23

我是在上传头像是用到上传头像去截取你要的部分图片

1.jsp文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="${pageContext.request.contextPath}/js/head/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"><link href="${pageContext.request.contextPath}/css/head/cropper.min.css" rel="stylesheet"><link href="${pageContext.request.contextPath}/css/head/sitelogo.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"><script src="${pageContext.request.contextPath}/js/head/bootstrap.min.js"></script><script src="${pageContext.request.contextPath}/js/head/cropper.js"></script><script src="${pageContext.request.contextPath}/js/head/sitelogo.js"></script><style type="text/css">.avatar-btns button {height: 35px;}</style></head><body>    <div style="overflow: hidden; margin-bottom: 20px;"><div style="float: Left; width: 60px; height: 80px; line-height: 80px; font-family: '微软雅黑'; font-size: 14px; color: #666;">头像</div><div style="float: left;overflow:hidden;position:relative; "><div class="user_pic" id="preview" >     <img style="float: left; font-size: 14px; border: none; height: 80px; width: 80px;overflow:hidden;display:block;border-radius:50%;" id="photoUrl" border="0" src="http://192.168.30.15:8080/pic/${User.userId}.jpg">    </div>    <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#avatar-modal" style="margin: 10px;">修改头像</button>    </div></div><div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content"><!--<form class="avatar-form" action="upload-logo.php" enctype="multipart/form-data" method="post">--><form class="avatar-form"><div class="modal-header"><button class="close" data-dismiss="modal" type="button">×</button><h4 class="modal-title" id="avatar-modal-label">上传图片</h4></div><div class="modal-body"><div class="avatar-body"><div class="avatar-upload"><input class="avatar-src" name="avatar_src" type="hidden"><input class="avatar-data" name="avatar_data" type="hidden"><label for="avatarInput" style="line-height: 35px;">图片上传</label><button class="btn btn-danger"  type="button" style="height: 35px;" onClick="$('input[id=avatarInput]').click();">请选择图片</button><span id="avatar-name"></span><input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div><div class="row"><div class="col-md-9"><div class="avatar-wrapper"></div></div><div class="col-md-3"><div class="avatar-preview preview-lg" id="imageHead"></div><!--<div class="avatar-preview preview-md"></div><div class="avatar-preview preview-sm"></div>--></div></div><div class="row avatar-btns"><div class="col-md-4"><div class="btn-group"><button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button></div><div class="btn-group"><button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button></div></div><div class="col-md-5" style="text-align: right;"><button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("setDragMode", "move")">            </span>          </button>          <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("zoom", 0.1)">              <!--<span class="fa fa-search-plus"></span>-->            </span>          </button>          <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("zoom", -0.1)">              <!--<span class="fa fa-search-minus"></span>-->            </span>          </button>          <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("reset")" aria-describedby="tooltip866214">       </button>        </div><div class="col-md-3"><button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button></div></div></div></div></form></div></div></div><div class="loading" aria-label="Loading" role="img" tabindex="-1"></div><script src="${pageContext.request.contextPath}/js/head/html2canvas.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//做个下简易的验证  大小 格式 $('#avatarInput').on('change', function(e) {var filemaxsize = 1024 * 5;//5Mvar target = $(e.target);var Size = target[0].files[0].size / 1024;if(Size > filemaxsize) {alert('图片过大，请重新选择!');$(".avatar-wrapper").childre().remove;return false;}if(!this.files[0].type.match(/image.*/)) {alert('请选择正确的图片!')} else {var filename = document.querySelector("#avatar-name");var texts = document.querySelector("#avatarInput").value;var teststr = texts; //你这里的路径写错了testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的filename.innerHTML = testend;}});$(".avatar-save").on("click", function() {var img_lg = document.getElementById('imageHead');// 截图小的显示框内的内容html2canvas(img_lg, {allowTaint: true,taintTest: false,onrendered: function(canvas) {canvas.id = "mycanvas";//生成base64图片数据console.log("aaaaaaaaaa");console.log(canvas);var dataUrl = canvas.toDataURL("image/jpeg");console.log(dataUrl);var newImg = document.createElement("img");newImg.src = dataUrl;imagesAjax(dataUrl)}});})function imagesAjax(src) {//console.log("fffffffffffff")//console.log(src)var data = {};data.img = src;data.jid = $('#jid').val();gt.ajax({url: "/user/TXfileUpload.action",data: data,type: "POST",dataType: 'json',success: function(re) {if(re.status == '1') {//preview$('#photoUrl').attr('src',src );}}});}</script></body></html>

2.后台代码

/** * 上传头像 支持剪切图片 *  * @param request * @param img * @param jid * @return * @throws Exception */@RequestMapping(value = "/fileUpload", method = RequestMethod.POST)@ResponseBodypublic String TXfileUpload(HttpServletRequest request, String img,String jid) throws Exception {img = img.split("base64,")[1];BASE64Decoder d = new BASE64Decoder();byte[] bs = d.decodeBuffer(img);String url = "d:/upload/" + loginUserId() + ".jpg";FileOutputStream os = new FileOutputStream(url);os.write(bs);os.close();request.setAttribute("loginUserId", loginUserId());return "{\"status\":1}";}

jsp页面引入了css文件和js文件可以再网上搜索下载到

阅读全文

0 0

上传图片 支持剪切图片 前后台代码

上传图片支持剪切图片前后台代码