Html5实现头像上传和编辑,保存为Base64的图片过程
一、Html5实现头像上传和编辑
插件地址:
html5手机端裁剪图片上传头像代码
本地项目引入注意事项:
1.将html的js搬到外面的js文件中,便于管理
2.图片样式在html都是在页面写死,需要调整
3.页面引入css和js,editPic.js是页面提取出来的js
<link href="../js/fileupload/style.css" rel="stylesheet" type="text/css">
<script src="../js/fileupload/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery|| document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="../js/fileupload/iscroll-zoom.js"></script>
<script src="../js/fileupload/hammer.js"></script>
<script src="../js/fileupload/jquery.photoClip.js"></script>
<script src="../js/editPic.js" type="text/javascript"></script>
关键代码:
<!-- 上传图片的样式 -->
<article class="htmleaf-container" style="display: none;">
<div id="clipArea"
style="user-select: none; overflow: hidden; position: relative;">
<div class="photo-clip-view">
<div class="photo-clip-moveLayer">
<div class="photo-clip-rotateLayer"></div>
</div>
</div>
<div class="photo-clip-mask">
<div class="photo-clip-mask-left"></div>
<div class="photo-clip-mask-right"></div>
<div class="photo-clip-mask-top"></div>
<div class="photo-clip-mask-bottom"></div>
<div class="photo-clip-area"></div>
</div>
</div>
<div class="foot-use">
<div class="uploader1 blue">
<input type="button" name="file" class="button" value="打开">
<input id="file" type="file"
onchange="javascript:setImagePreview();" accept="image/*"
multiple="">
</div>
<button id="clipBtn">截取</button>
</div>
<div id="view"></div>
</article>
显示图片的位置
<p class="userPic mb10">
<a id="logox"><i><img id="show" src="" width="100%"></i></a>
</p>
修改$("#clipBtn")方法体
其中imgsource就是插件,剪切出来的base64位的图片编码,我们需要将编码转成图片保存
$("#clipBtn").click(
function() {
$.ajax({
type : 'POST',
url : PROJECT_PATH + '/upload/mobileUploadPic',
data : {
"imgsource" : imgsource,
"path" : "citizens"
},
dataType : 'text',
success : function(data) {
var ao = $.parseJSON(data);
if (ao.result) {
picFileSaveUrl = ao.obj.picFileSaveUrl;
$("#show").attr("src",PROJECT_PATH+picFileSaveUrl);
$("#pictureUrl").val(PROJECT_PATH+picFileSaveUrl);
$(".htmleaf-container").hide();
} },
// 调用出错执行的函数
error : function() {
} }); })
});
二、Base64的存储为本地图片过程
需要注意的是 图片的base64位是带有"data:image/jpeg;base64,"字段,需要去掉,才能保存图片的
public final static String BASE64_HEADER = "data:image/jpeg;base64,";// base64位的头部信息
File file = new File(picUrl);
if (!file.getParentFile().exists()) {
file.getParentFile().mkdirs();
}
try {
file.createNewFile();
} catch (IOException e) {
e.printStackTrace();
} String base64ImgData = imgsource.substring(BASE64_HEADER.length(), imgsource.length() - 1); decodeBase64ToImage(base64ImgData, file);// 转成文件
/**
* 将Base64位编码的图片进行解码,并保存到指定目录
*
* @param base64
* base64编码的图片信息
* @return
*/
public static void decodeBase64ToImage(String base64, File file) {
BASE64Decoder decoder = new BASE64Decoder();
try { byte[] decoderBytes = decoder.decodeBuffer(base64); for (int i = 0; i < decoderBytes.length; ++i) {
// 调整异常数据
if (decoderBytes[i] < 0) {
decoderBytes[i] += 256;
}
} OutputStream write = new FileOutputStream(file);
write.write(decoderBytes);
write.flush();
write.close();
} catch (IOException e) {
e.printStackTrace();
}
}
完~
Html5实现头像上传和编辑,保存为Base64的图片过程的更多相关文章
- springboot 头像上传 文件流保存 文件流返回浏览器查看 区分操作系统 windows 7 or linux
//我的会员中心 头像上传接口 /*windows 调试*/ @Value("${appImg.location}") private String winPathPic; /*l ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)
今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...
- struts 头像上传
java代码: 1 package cn.itcast.nsfw.user.action; import java.io.File; import java.io.IOException; impor ...
- Canvas处理头像上传
未分类 最近社区系统需要支持移动端,其中涉及到用户头像上传,头像有大中小三种尺寸,在PC端,社区用Flash来处理头像编辑和生成,但该Flash控件的界面不友好而且移动端对Flash的支持不好,考虑到 ...
- Yii2.0 集成使用富头像上传编辑器
在开发过程中,我们会用到头像上传的功能.这里给大家推荐一款比较流行的头像上传组件,FullAvatarEditor 2.3(富头像上传编辑器). 实际效果如图所示: 1.下载组件,下载地址:http: ...
- 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑
项目中需要用到多图片上传功能,于是在百度搜了一下,首先使用了kissy uploader,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件...但,后面问题出现了. 在对添加的信息进 ...
- php头像上传预览
php头像上传带预览: 说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过fo ...
- Django项目实战之用户头像上传与访问
1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- Linux Shell编程(14)——内部变量
内建变量影响Bash脚本行为的变量.$BASHBash二进制程序文件的路径 bash$ echo $BASH /bin/bash$BASH_ENV该环境变量保存一个Bash启动文件路径,当启动一个脚本 ...
- 如何给循环中的对象添加事件--深入理解JavaScript的闭包特性
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- ubuntu设置WPA2-PSK的wifi热点(AP)——hostapd+dhcpd
在ubuntu 12.04中,默认可以设置的wifi热点是只能用WEP加密,毫无疑问,这样的加密方式,安全性低,现在可以在10几秒的时间内破解,并且只能添加ad-hoc模式的热点,不支持添加AP模式, ...
- 如何使用TcpDump抓取远程主机的流量并回显到本地的WireShark上
ssh -t username@remoteip "echo rootpassword | sudo -S tcpdump -i eth0 -A '(tcp[((tcp[12:1] & ...
- BCTF赛后
今天早上八点,BTCF第一届落幕.虽然没有熬夜coding但还是十分开心. 从收到超哥的邀请,到回头组队,一开始的十几人,最后演化为五人的精简小分队,到昨晚把所有有想法的题目全部搞定,十分的开心和欣慰 ...
- Google图片搜索
本博文的主要内容有 .Google图片搜索的介绍 .Google图片之普通搜索 .Google图片之高级搜索 1.Google图片搜索的介绍 Google的图片搜索,不仅通过关键字查找拥有特 ...
- 2 storm的topology提交执行
本博文的主要内容有 .storm单机模式,打包,放到storm集群 .Storm的并发机制图 .Storm的相关概念 .附PPT 打包,放到storm集群去.我这里,是单机模式下的storm. wee ...
- 关于android 自己实现 back键 home键
今天在被问到一个问题的时候突然想要看看这些东西了.因为一直以来,我返回上个界面,和大家普遍的方法都是一样的. 1. finish()本页面. 2. intent 跳转到上个页面. 一 ,在 按下手机上 ...
- HTML5笔记(一)
1.HTML5提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>.这些标签较有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视频人士使用,除此之外,还 ...
- 1040. Longest Symmetric String (25)
题目链接:http://www.patest.cn/contests/pat-a-practise/1040 题目: 1040. Longest Symmetric String (25) 时间限制 ...