javaWeb实现裁剪图片上传整套方案

最新推荐文章于 2024-06-03 23:10:45 发布
最新推荐文章于 2024-06-03 23:10:45 发布
阅读量3.9k 收藏 22
点赞数 1
分类专栏： javaWeb 文章标签： java web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35661734/article/details/52510964
版权

实现思路

  • 使用jcrop插件手机要裁剪图片的坐标
  • 将收集到的参数传递到后台，在后台使用java图形对象绘制图像进行裁剪
    • 后台处理流程：
      1、将上传的图片按按照比例进行压缩后上传到文件服务器，并且将压缩后的图片保存在本地临时目录中。
      2、将压缩后的图片回显到页面，使用jcrop进行裁剪，手机裁剪坐标（x,y,width,height）
      • @paramx 目标切片起点坐标X
      • @param y 目标切片起点坐标Y
      • @param width 目标切片宽度
      • @param height 目标切片高度
        3、后台处理裁剪裁剪，重新上传

jsp页面

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>上传用户头像</title>
    <link href="${pageContext.request.contextPath}/js/cutImg/css/master.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/js/cutImg/css/upload.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/js/cutImg/css/jquery.rollbar.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/js/cutImg/css/jquery.Jcrop.css" rel="stylesheet" />
</head>
<body>
<div class="user_upload">
    <form id="uploadImgFrom" enctype="multipart/form-data" method="post">
        <div class="upload">
            <div class="upload_left">
                <div class="pic">
                    <div class="pic2" id="pic2" >
                        <div id="uploadFile">
                            <div class="upload_btn" style="margin-left: 75px;">
                                <a href="javascript:;" id="upText" style="color:red;">上传头像</a>
                            </div>
                            <p>
                                支持jpg、png格式<br />
                                图片小于2M
                            </p>
                        </div>
                        <!--回显示图片-->
                        <img src="" name="photo" id="originalImg" alt=""/>
                    </div>
                </div>
                <p class="up_reload" id="up_reload" style="display: none;">
                    <a href="javascript:;" style="color: red">重新上传</a>
                </p>
                <input type="hidden" name="picval" id="picval" />
                <input type="hidden" name="origpicval" id="origpicval" value="" />
                <input type="hidden" name="temporigpic" id="temporigpic" />
                <input type="hidden" name="fileID" id="fileID" size="100" />
                <input type="hidden" name="fileUrl" id="fileUrl" size="100" />
                <input type="hidden" name="imgHeight" id="imgHeight" size="100" />
                <input type="hidden" name="imgWidth" id="imgWidth" size="100" />

            </div>
            <div class="upload_right">
                <div class="upload_view_pic" style="width: 300px; height: 230px; border: solid 1px #ccc; overflow: hidden;">
                    <img id="preview_1" src="${pageContext.request.contextPath}/images/4-3.jpg"/>
                </div>
                <p>
                    400 x 300像素
                </p>
                <%--<div class="upload_view_pic" style="width: 80px; height: 80px; border: solid 1px #ccc; overflow: hidden;">
                    <img id="preview_2" src=${pageContext.request.contextPath}/images/4-3.jpg />
                </div>
                <p>
                    80 x 80像素
                </p>--%>
                <p>
                    拖拽或缩放，生成自己满意的头像
                </p>
            </div>
           <%-- <div id="img_description">
                <textarea
            </div>--%>
            <div class="upload_b">
                <font id="upalert"></font>
            </div>
        </div>
        <input type="hidden" name="x" id="x" size="5" />
        <input type="hidden" name="y" id="y" size="5" />
        <input type="hidden" name="w" id="w" size="5" />
        <input type="hidden" name="h" id="h" size="5" />
        <input type="hidden" name="imgUrl" id="imgUrl"/>
        <input type="hidden" name="imgId" id="imgId"/>
        <div class="upload_submit_contain">
            <div class="upload_submit" id="saveImage">
                <a href="javascript:;" style="color: red">保存头像</a>
            </div>
        </div>
    </form>
</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.form.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/check.js"></script>
<script src="${pageContext.request.contextPath}/js/cutImg/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/cutImg/js/jquery.form.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/cutImg/js/jquery-custom-file-input.js" type="text/jav
最低0.47元/天 解锁文章
码农张晓
关注
  • 1
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 本地裁剪图片并上传至服务器（转）
weixin_34357928的博客
02-16 668
很多情况下用户上传的图片都需要经过裁剪，比如头像啊什么的。但以前实现这类需求都很复杂，往往需要先把图片上传到服务器，然后返回给用户，让用户确定裁剪坐标，发送给服务器，服务器裁剪完再返回给用户，来回需要 5 步。步骤繁琐不说，当很多用户上传图片的时候也很影响服务器性能。 HTML5 的出现让我们可以更方便的实现这一需求。虽然这里所说的技术都貌似有点过时了（前端界的“过时”，你懂的），但还是有些许参...
图片裁剪并上传到阿里云oss
不积跬步，无以至千里
12-08 901
此案例需要基于我前面两遍文章的代码，建议先行阅读。 阿里云OSS图片上传（java web直传）https://blog.csdn.net/u011628753/article/details/110876234 前端图片裁剪并上传到七牛云kodohttps://blog.csdn.net/u011628753/article/details/110877703 逻辑思想 将dataUrl（base64）转换为file对象,利用uploader.addFile添加file文件，然后再上传文件..
如何在JavaWeb项目中实现图片上传（含示例代码）
最新发布
2301_79858914的博客
06-03 758
以上就是如何在JavaWeb项目中实现图片上传，并将图片的URL地址存储到数据库中。如果你有更多的定制需求，可以在此基础上进行进一步扩展和修改。如果你使用Maven进行项目管理，你需要确保数据库中有一个名为。的表，至少有一个名为。
HTML如何剪切图片,HTML5技术实现剪切+上传图片的功能
weixin_32033241的博客
06-10 705
html 第一步，我们先画一个表头现在再描绘主体部分Step1: Please select image fileStep2: Please select a crop regionFile sizeTypeImage dimensionWHCSS.bheader {background-color: #DDDDDD;border-radius: 10px 10px 0 ...
imgareaselect + php 裁剪和上传,imgareaselect辅助后台实现图片上传裁剪方法教程
weixin_42098830的博客
03-23 188
本文主要为大家详细介绍了利用imgareaselect辅助后台实现图片裁剪的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。因为项目当中用到图片裁剪，本来可以不用到后台进行裁剪的，但是要兼容万恶的IE浏览器，所以不得不使用后台进行裁剪。这次使用到imgareaselect 插件获取需要裁剪区域的坐标，再由后台进行裁剪操作。先上个效果图再说但是这里有一个坑就是上传的图片...
JavaWeb实现裁剪图片上传完整代码
09-01
JavaWeb实现裁剪图片上传涉及的关键技术点包括前端交互、图片处理、文件上传以及后端逻辑。以下是对这些知识点的详细说明： 1. **前端交互**： - 使用HTML、CSS和JavaScript构建用户界面，允许用户选择并预览图片...
javaweb上传和显示图片(含源码).zip
04-23
在JavaWeb开发中，文件上传和显示图片是常见的功能需求，尤其在构建MVC架构的Web应用时。本文将深入探讨如何使用Eclipse IDE，在MVC模式下利用JSP、Servlet、DAO、Service等组件来实现图片的上传、存储以及查询显示...
JAVAweb上传下载功能实现
12-05
在JavaWeb开发中，实现文件上传和下载功能是常见的需求，尤其对于初学者来说，理解这一过程至关重要。这里我们将深入探讨如何使用SmartUpload库来实现这些功能。 首先，`SmartUpload`是一个强大的JavaWeb文件上传...
javaweb入门实现图片上传，图片加载，图片显示，图片按照任意高宽比例显示
11-22
在JavaWeb开发中，处理图片上传、...以上就是对"javaweb入门实现图片上传，图片加载，图片显示，图片按照任意高宽比例显示"这一主题的详细解释。通过学习和实践这些知识点，开发者可以构建出功能完善的图片管理功能。
JavaWeb如何实现本地文件上传功能
08-25
JavaWeb 实现本地文件上传功能 JavaWeb 实现本地文件上传功能是指在 Web 应用程序中实现文件上传功能，使用户可以从本地计算机上传文件到服务器端。本文将详细介绍 JavaWeb 实现本地文件上传功能的步骤和实现代码。...
推荐! 使用react-cropper-pro实现图片裁切压缩上传
趣谈前端
07-17 709
大厂技术坚持周更精选好文在前端开发的过程中, 我们经常遇到文件上传或者图片上传的需求, 有些场景中可能还会要求上传图片后对图片进行裁切, 压缩. 对于不想加班的程序员来说, 第一要义就是使用斯第三方库. 虽然像我们熟悉的antd, element等库提供了上传组件:image.png但是这些第三方UI库一方面体积比较庞大, 不够轻量, 另一方面不支持裁切, 压缩等...
layUI框架通过Cropperjs实现上传图片裁剪
aadyf的博客
04-21 1969
最近项目需求要实现上传图片并能裁剪的功能，项目框架使用layUI，于是乎，各种找度娘翻资料发现大家都极力推荐cropper组件实现截取(裁剪)上传，于是我也选择了它。 业务需求是这样的：前端实现图片上传裁剪并将裁剪后图片转换为base64位编码通过ajax传给后台,后台再将base64位编码生成图片路径返回给前台展示。 第一步：下载layUI官网提供的扩展组件cropper到本地，地址(htt...
html裁剪图片上传,HTML5 本地裁剪图片并上传至服务器（转）
weixin_39683863的博客
06-04 255
不少状况下用户上传的图片都须要通过裁剪，好比头像啊什么的。但之前实现这类需求都很复杂，每每须要先把图片上传到服务器，而后返回给用户，让用户肯定裁剪坐标，发送给服务器，服务器裁剪完再返回给用户，来回须要 5 步。步骤繁琐不说，当不少用户上传图片的时候也很影响服务器性能。htmlHTML5 的出现让咱们能够更方便的实现这一需求。虽然这里所说的技术都貌似有点过期了(前端界的“过期”，你懂的)，但仍是有些...
JavaWeb-Springboot图片裁剪
孤山之王
01-27 656
Springboot下，通过HTTP方式对图片进行裁剪
java图片的上传裁剪功能实现
qihaha_521的专栏
05-21 431
实现java图片上传和裁剪（js代码略）： 1.引入jimiProClasses.jar包； 2.导入我写好的工具类（实现源码在附件）； 3.使用代码： //上传图片 public Boolean uplodImg(String userimgname,File uploduserimg,String sourceSrc,String newSrc,int zoom) {    if (...
JAVA + js 实现 头像上传及裁剪功能
热门推荐
xixihahahj的专栏
10-23 1万+
题记 我想大家对头像上传功能在陌生不过了把，每个人都应该用过，当然，从不更改头像的大侠除外，写到这里，我突然想到我的CSDN用户也没有头像，于是，我到设置里面准备去看看CSDN的头像上传功能是怎样的，可是我弄了半天都没搞定，提示说高版本浏览器不支持预览，难道只有IE6才支持？难得吐槽一下，不知道是我人品问题还是没用对。如图： 准备工作 好了，废话不多说了，一般常用的头像上传有
javaweb实现上传图片且预览
06-02
实现上传图片并预览，需要以下步骤： 1. 在前端页面添加一个input标签，type属性设置为file，用于选择本地图片上传。 ``` ()"/> ``` 2. 在前端页面添加一个用于预览图片的标签，例如img标签。 ``` 预览图片" ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值