`
netingcn
  • 浏览: 18902 次
  • 来自: ...
社区版块
存档分类
最新评论

js实现编辑用户头像

PHPTomcat应用服务器浏览器JSP 
阅读更多
目前很多网站都允许用户上传自己的图像，而编辑工具多为flash来实现，而我用javascript来实现，功能包括预览、缩放以及拖动等。前段用html，css加js，后端使用ImageMagicK来进行图片处理，为了方便运行deom程序，里面上传文件以及最终的图片裁减是用jsp来实现的，当然可以使用别的，以前曾经使用php来完成这两个功能，如果真正在java项目中，实现起来更加容易（因为本人一直从事java开发，呵呵）。不多说了，看效果图。如果想要运行demo的话，请把压缩包useravtar.rar,解压到tomcat_home/webapps下，启动tomcat即可，请不要修改应用的名称及useravtar，如果必须修改的，请同时修改avtar.js中定义的变量appName是其保持一致,启动tomcat，输入http://localhost:port/useravtar，应该就可以看到结果了。
哦，对了，需要装ImagemagicK这个软件，看看你们系统是否安装了！



  • 大小: 7.8 KB
  • 大小: 138.7 KB
  • 大小: 35.7 KB
分享到：
评论
36 楼 netingcn 2013-08-16  
soulboyi 写道
求大神加Q详细解答，我已经移植到eclipse crop.jsp文件里 图像魔法师的安装路径也已经改过去了 但是还是上传不了图片（没到编辑那一块）
543905344


有段时间没有登录iteye，不好意思，到现在才看到你的留言。
你的QQ好像加不了啊，你要不加我的QQ吧 9734278。
35 楼 soulboyi 2013-08-02  
求大神加Q详细解答，我已经移植到eclipse crop.jsp文件里 图像魔法师的安装路径也已经改过去了 但是还是上传不了图片（没到编辑那一块）
543905344
34 楼 yang888111 2013-07-07  
楼主，这个在chrome浏览器上不兼容啊，能不能调整下。
33 楼 fengwuqing40 2012-11-26  
看来错误都差不多，我装的ImageMagic安装后都不能正常使用，添加图片后也是失败，应该跟这有关吧

client name:3.jpg
2012-11-26 23:52:03 org.apache.catalina.core.StandardWrapperValve invoke
严重: Servlet.service() for servlet jsp threw exception
java.io.IOException: CreateProcess error=2, ?????????
at java.lang.ProcessImpl.create(Native Method)
at java.lang.ProcessImpl.<init>(ProcessImpl.java:81)
at java.lang.ProcessImpl.start(ProcessImpl.java:30)
at java.lang.ProcessBuilder.start(ProcessBuilder.java:452)
at java.lang.Runtime.exec(Runtime.java:593)
at java.lang.Runtime.exec(Runtime.java:431)
at java.lang.Runtime.exec(Runtime.java:328)
at org.apache.jsp.savefile_jsp._jspService(savefile_jsp.java:157)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:803)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:393)
at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:320)
at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:266)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:803)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:230)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:175)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:104)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:261)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:844)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:581)
at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:447)
at java.lang.Thread.run(Thread.java:619)
32 楼 netingcn 2011-12-06  
bctxe 写道
严重: Servlet.service() for servlet jsp threw exception
java.io.IOException: CreateProcess error=2, ?????????
at java.lang.ProcessImpl.create(Native Method)
at java.lang.ProcessImpl.<init>(ProcessImpl.java:81)
at java.lang.ProcessImpl.start(ProcessImpl.java:30)
at java.lang.ProcessBuilder.start(ProcessBuilder.java:452)
at java.lang.Runtime.exec(Runtime.java:593)
at java.lang.Runtime.exec(Runtime.java:431)
at java.lang.Runtime.exec(Runtime.java:328)
at org.apache.jsp.savefile_jsp._jspService(savefile_jsp.java:157)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:377)
at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)
at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:298)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:857)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:588)
at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:489)
at java.lang.Thread.run(Thread.java:619)
求解决~


具体情况能描述一下吗？
31 楼 bctxe 2011-12-03  
严重: Servlet.service() for servlet jsp threw exception
java.io.IOException: CreateProcess error=2, ?????????
at java.lang.ProcessImpl.create(Native Method)
at java.lang.ProcessImpl.<init>(ProcessImpl.java:81)
at java.lang.ProcessImpl.start(ProcessImpl.java:30)
at java.lang.ProcessBuilder.start(ProcessBuilder.java:452)
at java.lang.Runtime.exec(Runtime.java:593)
at java.lang.Runtime.exec(Runtime.java:431)
at java.lang.Runtime.exec(Runtime.java:328)
at org.apache.jsp.savefile_jsp._jspService(savefile_jsp.java:157)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:377)
at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)
at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:298)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:857)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:588)
at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:489)
at java.lang.Thread.run(Thread.java:619)
求解决~
30 楼 qichunren 2010-04-12  
非常感谢楼主.
这个有flash版式的么？
29 楼 triny1984 2010-04-11  
netingcn 写道
haytalent 写道
兰州，我下载了 ImageMagick 6.3.7.5  ，然后在TOMCAT6下运行你那个，运行不了


我也在tomcat6下，完全可以运行，不知道你上面没有报错，请把报错信息说一下，看看我能不能帮你解决以下



我刚才调试了一个楼主的工程我是能调通的，我也是下载了ImageMagick 6.3.7.5，我的TOMCAT5.5.12的（这个没有关系的）不过你可能有点小细节没有注意到我现在就简单写一下：
1)要修改文件：crop.jsp,其中一段代码是
  String cmd = "C:\\Tools\\ImageMagick-6.5.4-Q16\\convert "--你要改在你上面的版本，注意路径，当然这个软件只是服务端装就行了，客户端不用装
2)要注意一下，你在部署的时候不要少了upload这个文件夹了，上传图片和编辑后的图片都要放在这里的哦！

对于楼主这个工程还是觉得不错的，不过我有几个疑问：
1)对于编辑图片时要每天上传图片之后，再调用服务端的图片处理工具，截图的。就是能不能从本地取了图片之后上传了我编辑之后的图片就好一点，一影响网络传送，二是要定期清那个上传的原文件。
这个只是自己的看法。
28 楼 look12345 2010-03-25  
帅哥,试了一下,不行啊。js的效果一点都没有出来，无论什么浏览器
27 楼 mercuryzhang 2010-02-21  
我跟踪了一下发现： 
                String cmd = "identify -format %wx%h " + storeDir + storeName;	   
	        Process process = Runtime.getRuntime().exec(cmd);
	        InputStream fis = process.getInputStream();
                BufferedReader br = new BufferedReader(new InputStreamReader(fis)); 
            /*
            String line = null;
            while ((line = br.readLine()) != null) {
        	}
            */
            System.out.println("---------4-------:"+br.readLine());

这里br.readLine()是null啊？
不知道为什么啊？
26 楼 cuixiping 2010-02-21  
netingcn 写道
月影无痕 写道
这样的效果好，但是裁剪前需要把图片上传，如果用户误选择，会导致一些小小不便

我最近也需要有这个裁剪功能，但是我想的是，在图片选择后，上传前，如果能对图片进行缩放，画框，然后提交，那么用户体验会更好。

网上找了些，都没有这个效果，都是上传后才能画框，再裁剪。

我就站在巨人肩膀上，修改下，弄好后，发出来


如果先不上传图片，似乎不能做到预览，在IE6种，img标签是可以用本地图片文件作为src来显示图片的，但在ie6以上斑斑，以及FF中都不能用本地文件，浏览器可能也是基于安全性的原因，不允许src用本地文件

另外，要是错传文件，用户可以重新上传一张，要是真正的用在项目中，可能需要定期对上传的目录进行清理。否则随着时间的流逝，上传目录文件会越来越多.


兼容IE6,IE7,IE8和Firefox的本地图片预览效果
http://blog.sina.com.cn/s/blog_51f87c4a0100fv0n.html
25 楼 s海若 2010-02-16  
上传
正在上传文件，请稍候！。。。
装完ImagemagicK
上传
正在上传文件，请稍候！。。。
大哥，认真点好不好，浪费了多少人的时间啊。
发出来就把使用步骤写全了。
想拍砖都找不到砖头。。。
24 楼 askyuan 2010-02-16  
要么别做，要做就做像样点，完美点，你这个都跑不动，还上传？
23 楼 fyland 2010-02-01  
可以参考discuz！的
22 楼 canli0011 2010-02-01  
有问题。。。上传不了。
21 楼 cs_man 2010-01-25  
运行有错误：
严重: Servlet.service() for servlet jsp threw exception
java.io.IOException: CreateProcess: identify -format %wx%h D:\Tomcat 6.0\webapps\useravtar\upload\57QOQ6TP.jpg error=2
at java.lang.ProcessImpl.create(Native Method)
at java.lang.ProcessImpl.<init>(Unknown Source)
at java.lang.ProcessImpl.start(Unknown Source)
at java.lang.ProcessBuilder.start(Unknown Source)
at java.lang.Runtime.exec(Unknown Source)
at java.lang.Runtime.exec(Unknown Source)
at java.lang.Runtime.exec(Unknown Source)
at org.apache.jsp.savefile_jsp._jspService(savefile_jsp.java:160)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:820)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:393)
at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:320)
at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:266)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:820)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:175)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:263)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:844)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:584)
at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:447)
at java.lang.Thread.run(Unknown Source)
20 楼 netingcn 2010-01-25  
月影无痕 写道
这样的效果好，但是裁剪前需要把图片上传，如果用户误选择，会导致一些小小不便

我最近也需要有这个裁剪功能，但是我想的是，在图片选择后，上传前，如果能对图片进行缩放，画框，然后提交，那么用户体验会更好。

网上找了些，都没有这个效果，都是上传后才能画框，再裁剪。

我就站在巨人肩膀上，修改下，弄好后，发出来


如果先不上传图片，似乎不能做到预览，在IE6种，img标签是可以用本地图片文件作为src来显示图片的，但在ie6以上斑斑，以及FF中都不能用本地文件，浏览器可能也是基于安全性的原因，不允许src用本地文件

另外，要是错传文件，用户可以重新上传一张，要是真正的用在项目中，可能需要定期对上传的目录进行清理。否则随着时间的流逝，上传目录文件会越来越多.
19 楼 月影无痕 2010-01-25  
这样的效果好，但是裁剪前需要把图片上传，如果用户误选择，会导致一些小小不便

我最近也需要有这个裁剪功能，但是我想的是，在图片选择后，上传前，如果能对图片进行缩放，画框，然后提交，那么用户体验会更好。

网上找了些，都没有这个效果，都是上传后才能画框，再裁剪。

我就站在巨人肩膀上，修改下，弄好后，发出来
18 楼 41897179 2010-01-24  
不错，谢谢楼主分享，如果能重构下酒跟好了
17 楼 happysoul 2010-01-24  
JAVA的IO又不是不能实现裁剪 为啥还要单独弄东西啊~~
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js 头像编辑 上传

    总结来说，这个"js 头像编辑 上传"项目涵盖了前端开发中的基本技术，包括HTML结构、CSS样式和JavaScript交互，以及头像编辑和文件上传的实现细节。通过学习和实践这个项目，开发者可以提升对前端开发的理解，尤其是...

    头像编辑器

    "头像编辑器"是一款专为网页设计的头像编辑工具，它借鉴了类似QQ头像编辑的功能，让用户能够在网页上方便地裁剪、编辑个人头像。这款工具主要使用JavaScript语言开发，可能还结合了CSS3和HTML5等前端技术，以实现...

    JS头像上传，JS头像截取，PHP头像截取插件

    在Web开发中，用户界面的交互性和个性化设计已经成为提升用户体验的关键因素之一，而头像上传和截取功能正是其中常见的需求。"JS头像上传，JS头像截取，PHP头像截取插件" 提供了一整套解决方案，特别强调了名为 ...

    可编辑的头像上传

    这个“可编辑的头像上传”项目提供了一种实现这一功能的方法，具有很高的实用性。以下是对该主题的详细解释： 首先，我们要理解的是jQuery插件在其中的角色。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档...

    js实现图片剪裁、头像上传预览效果

    之前做用户档案的照片上传时一直在研究做一个可以在线编辑图片的功能，网上看了很多资料都是flash+php实现的，java还没有比较好的实现。找了很多资料，整理了一下，原理大概分为两部分：一个是前台用JavaScript对...

    c# 实现头像上传裁剪，集成富文本编辑器的使用

    在C#编程中，实现头像上传裁剪和集成富文本编辑器是常见的功能，尤其在Web应用开发中。这两个功能极大地提升了用户交互体验，使用户可以自由地处理和编辑内容。下面将详细讲解这两个知识点。 一、头像上传裁剪 1. ...

    JavaScript头像裁剪上传组件

    JavaScript头像裁剪上传组件是Web开发中常见的一种功能，用于允许用户在前端选择并裁剪图片，然后将其上传到服务器。这个组件通常涉及到多个技术点，包括HTML5的File API、Canvas画布、图像处理算法以及AJAX异步通信...

    头像上传 在线编辑头像

    在IT行业中，头像上传与在线编辑功能是许多社交媒体、论坛和个人账户设置中的常见功能。这个示例项目，"头像上传 在线编辑头像"，旨在提供一个类似于微博平台的头像处理体验，让用户能够方便地上传、编辑并预览他们...

    jQuery实现头像预览

    本文将深入探讨如何使用jQuery实现头像预览功能，这在许多网站和应用中都是非常实用的，例如用户注册、个人资料编辑等场景。 首先，我们需要了解头像预览的基本原理。当用户在网页上选择一个图像文件后，我们通常...

    jquery头像编辑插件，编辑图片

    本篇文章将详细讲解基于jQuery的头像编辑插件及其核心功能，以及如何实现图片的编辑和裁剪，生成缩略图。 首先，"jquery头像编辑插件"是一种专门用于处理用户头像的工具，它通常结合HTML5的Canvas元素，提供图片...

    弹窗头像编辑预览

    本项目标题为“弹窗头像编辑预览”，其核心目标是实现一个类似新浪微博头像编辑的功能，让用户能够在弹出的窗口中对头像进行裁剪和预览，以便于选择最合适的展示方式。 首先，我们要理解这个功能的技术实现基础。...

    头像上传编辑

    在IT行业中，头像上传编辑是一项常见的功能，尤其在社交网络、个人资料设置...综上所述，“头像上传编辑”是一个涉及前端开发、图片处理、数据库存储和用户体验等多个方面的功能实现，需要综合运用多种技术和最佳实践。

    富头像上传编辑

    7. **前端框架和库**：在实现这样的富头像编辑器时，开发者可能会用到前端框架如React、Vue或Angular，以及图像处理库如Fabric.js、Pixi.js或Cropper.js等，它们能简化开发过程，提供丰富的功能接口。 8. **用户...

    【JavaScript源代码】js实现头像上传并且可预览提交.docx

    本文将详细介绍如何利用JavaScript实现头像上传功能，并在不上传至服务器的情况下实现在客户端（浏览器）进行预览的功能。 #### 技术选型与实现思路 本文介绍的方法是通过在本地内存中预览所选图片，待用户确认后...

    html+javascript头像上传预览

    "html+javascript头像上传预览"是利用HTML和JavaScript技术实现的一种交互方式，它允许用户在提交头像之前预览选定的图片，提供更好的用户体验。在此过程中，CSS可能用于美化和定制预览效果，例如将头像显示为圆形。...

    Javascript头像截图

    JavaScript头像截图是一种常见的Web开发功能，用于用户在网页上选择或编辑个人头像后，以图片形式进行保存或分享。这种技术主要依赖于HTML5的一些特性，如Canvas元素和FileReader API，来实现对图像的截取和处理。...

    jsp头像上传编辑截取实例

    在本文中，我们将深入探讨如何使用Java Server Pages (JSP) 实现一个功能完善的头像上传、编辑和截取的实例。这个实例适用于网站或应用中用户个人资料的头像管理，让用户能够自定义选择大小并裁剪上传的图片。 首先...

    头像在线编辑 手动控制大小裁剪去

    在IT行业中，头像在线编辑是一项常见的功能，尤其在社交媒体、个人资料设置或者网络社区等应用场景中。这个功能允许用户上传自己的照片，并...通过合理的设计和实现，可以为用户提供便捷、灵活且高效的头像编辑体验。

    vue实现在线简历编辑器(在线网页编辑)

    - **实时预览**：利用Vue的响应式特性，实现编辑内容的实时预览，确保用户看到的即为最终效果。 - **模板选择**：提供多种简历模板供用户选择，可以通过切换CSS样式实现。 4. **文件上传与存储**： - **图片上传...

Magicbox
Global site tag (gtag.js) - Google Analytics