當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

浮士德头像裁剪flash版2016福利版

發布時間：2024/3/13 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了浮士德头像裁剪flash版2016福利版小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

最近看回以前改的flash版頭像裁剪，譬如，浮士德頭像裁剪，發現了一些bug，還有一些不盡如意的地方，譬如，圖片上傳的方式沒有遵守web的mutipart標準，整個組件沒有組件化便于調用。當然，還有就是沒有將源代碼和可執行的文件放出來給大家用，這一點實在遺憾，
于是重新修改了一部分，然后打包源代碼，接著做了一個小插件給大家方便使用。

介紹

該插件用于ie及舊版本的瀏覽器，用于兼容目的，假如大家要用在手機端或者ipad等，可以參考本人寫的浮士德html5圖片裁剪器，已經經過多個成熟項目的應用，基本不會有多大的問題。

頁面例子

<%--Created by IntelliJ IDEA.User: AdministratorDate: 2016/6/12Time: 15:59To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title></title><%Date __nowDate=new Date();boolean __js_debug=false;if("true".equals(request.getParameter("debug"))){__js_debug=true;}%><script type="text/javascript">window.ContextPath="";window.__js_debug=<%=__js_debug%>;window.__js_debug=true;</script><script type="text/javascript" src="/static/lib/jquery-1.11.0.min.js"></script><script type="text/javascript" src="/static/lib/jquery-migrate-1.2.1.min.js"></script><script type="text/javascript" src="/static/lib/ejs_production.js"></script><script type="text/javascript" src="/static/lib/util.min.js"></script><script type="text/javascript" src="/static/lib/moment.min.js"></script><script type="text/javascript" src="/static/vendor/laytpl/laytpl.js"></script><script type="text/javascript" src="/static/vendor/seajs/sea.js"></script><link rel="stylesheet" type="text/css" href="/static/vendor/iTips/css/ns-default.css" /><link rel="stylesheet" type="text/css" href="/static/vendor/iTips/css/ns-style-growl.css" /><script src="/static/vendor/iTips/js/modernizr.custom.js"></script><script src="/static/vendor/iTips/js/notificationFx.js"></script><script type="text/javascript" src="/static/vendor/art-dialog-v6/dist/dialog-min.js"></script><script type="text/javascript" src="/static/vendor/art-dialog-v6/dist/dialog-plus-min.js"></script><link href="/static/vendor/art-dialog-v6/css/ui-dialog.css" rel="stylesheet" media="screen" /><link href="/static/vendor/mutiImageUpload/style.css" rel="stylesheet" media="screen" /><script type="text/javascript" src="/static/vendor/mutiImageUpload/main.js"></script><link href="/static/ui/ui.css" rel="stylesheet" media="screen" /><script type="text/javascript" src="/static/ui/UiUtil.js"></script><script type="text/javascript" src="/static/ui/WebUI.js"></script><script type="text/javascript" src="/static/lib/swfobject.js"></script><script type="text/javascript" src="/static/vendor/FaustAvatar/main.js"></script> </head> <body> <h1>浮士德flash頭像裁剪上傳插件演示</h1><div id="cutter"></div> <div id=""><img src="" id="image_preview"> </div> <script>var opts={containerId:"cutter", //div容器id。，"imgUrl":"/static/origin-demos/images/s1.jpeg", //默認頭像圖片url。"uploadSrc":true, //是否上傳原始圖片"showBrow":true, //是否顯示瀏覽文件按鈕"showCame":true, //是否顯示拍照上傳按鈕"uploadUrl":"/service/FaustAvatarHandler.jsp", //上傳的url地址"uploadCameraPhotoUrl":"" //上傳攝像頭的圖片地址，假如為空，那么就跟uploadUrl一樣。,onUpload:function(serverdata){console.log(serverdata);if(serverdata.state==true){$("#image_preview").attr("src",serverdata.url);}else{alert("上傳失敗");}} //處理上傳時候的狀態。};$(function(){FaustAvatar(opts);});</script></body> </html>

后臺接收demo程序

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.*,java.io.*" %> <%@ page import="java.text.SimpleDateFormat" %> <%@ page import="org.apache.commons.fileupload.*" %> <%@ page import="org.apache.commons.fileupload.disk.*" %> <%@ page import="org.apache.commons.fileupload.servlet.*" %> <%@ page import="com.alibaba.fastjson.JSONObject" %> <%/*** KindEditor JSP** 本JSP程序是演示程序，建議不要直接在實際項目中使用。* 如果您確定直接使用本程序，使用之前請仔細確認相關安全設置。**///文件保存目錄路徑String savePath = application.getRealPath("/") + "uploads/";//文件保存目錄URLString saveUrl = request.getContextPath() + "/uploads/";System.out.println(savePath);//定義允許上傳的文件擴展名HashMap<String, String> extMap = new HashMap<String, String>();extMap.put("image", "gif,jpg,jpeg,png,bmp");extMap.put("flash", "swf,flv");extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");//最大文件大小long maxSize = 1000000;response.setContentType("text/html; charset=UTF-8");if(!ServletFileUpload.isMultipartContent(request)){out.println(getError("請選擇文件。"));return;} //檢查目錄File uploadDir = new File(savePath);if(!uploadDir.isDirectory()){uploadDir.mkdirs();}if(!uploadDir.isDirectory()){out.println(getError("上傳目錄不存在。"));return;} //檢查目錄寫權限if(!uploadDir.canWrite()){out.println(getError("上傳目錄沒有寫權限。"));return;}String dirName = request.getParameter("dir");if (dirName == null) {dirName = "image";}if(!extMap.containsKey(dirName)){out.println(getError("目錄名不正確。"));return;} //創建文件夾savePath += dirName + "/";saveUrl += dirName + "/";File saveDirFile = new File(savePath);if (!saveDirFile.exists()) {saveDirFile.mkdirs();}SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");String ymd = sdf.format(new Date());savePath += ymd + "/";saveUrl += ymd + "/";File dirFile = new File(savePath);if (!dirFile.exists()) {dirFile.mkdirs();}FileItemFactory factory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(factory);upload.setHeaderEncoding("UTF-8");List items = upload.parseRequest(request);boolean hasUploadFile=false;Iterator itr = items.iterator();while (itr.hasNext()) {FileItem item = (FileItem) itr.next();String fileName = item.getName();long fileSize = item.getSize();if (!item.isFormField()) {//檢查文件大小if(item.getFieldName().equals("thumb")){}else{continue;}if(item.getSize() > maxSize){out.println(getError("上傳文件大小超過限制。"));return;}//檢查擴展名hasUploadFile=true;String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){out.println(getError("上傳文件擴展名是不允許的擴展名。\n只允許" + extMap.get(dirName) + "格式。"));return;}SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;try{File uploadedFile = new File(savePath, newFileName);item.write(uploadedFile);}catch(Exception e){out.println(getError("上傳文件失敗。"));return;}JSONObject obj = new JSONObject();obj.put("error", 0);obj.put("state", true);obj.put("url", saveUrl + newFileName);out.println(obj.toJSONString());}}if(hasUploadFile==false){out.println(getError("請求中不包含任何文件。"));} %> <%!private String getError(String message) {JSONObject obj = new JSONObject();obj.put("error", 1);obj.put("state", false);obj.put("message", message);return obj.toJSONString();} %>

歷史文檔

假如你希望知道這個項目的相關環境及搭建，運行方式，可以參考下列名稱。

編譯浮士德頭像上傳并且修改代碼以適合項目

actionscript里面如何上傳文件到服務端？

資源下

最后，將項目源代碼和編寫好的組件給大家，希望可以好好運行：

浮士德頭像裁剪2016福利版-web插件打包

浮士德2016頭像裁剪flash福利版項目源代碼

總結

以上是生活随笔為你收集整理的浮士德头像裁剪flash版2016福利版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。