html5 图片转为base64格式异步上传
2024-10-18 17:18:54
因为有这个需求(移动端),所以就研究了一下,发现还挺不错的。
这个主要是用了html5的API,不需要其他的JS插件,不过只有支持html5的浏览器才行,就现在而言应该大部份都支持的。
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<title></title>
</head>
<body> <img id="expImg"/>
<img id="img" style="display:none"/>
<div><input type="file" id="file"></div>
<div id="btn" style="font-size:48px; line-height:60px">确定</div> </body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript"> $(document).ready(function(){
web.main();
}); var web={
main : function(){
web.init();
web.getImgUrl();
},
init : function(){
this.file_Id=$("#file");
this.img_Id=$("#img");
this.expImg_Id=$("#expImg");
this.btn_Id=$("#btn");
this.c=document.createElement("canvas");
this.ctx=this.c.getContext("2d");
},
getImgUrl : function(){
var fileUrl="",imgDataUrl="",reader=new FileReader(),imgW=0,imgH=0,expW=0,expH=0,imgMax=800; web.btn_Id.click(function(){
imgW=0;
imgH=0;
expW=0;
expH=0;
web.img_Id[0].src=""; //转换图片为base64格式
fileUrl=web.file_Id[0].files[0];
reader.readAsDataURL(fileUrl); reader.onload=function(e){
web.img_Id[0].src=this.result; imgW=web.img_Id.width();
imgH=web.img_Id.height(); //改变图片尺寸,这个根据自己的实际需求来写算法
if(imgW>imgMax&&imgW>=imgH){
expW=imgMax;
expH=parseInt((imgMax*imgH)/imgW);
}else if(imgH>imgMax&&imgH>imgW){
expH=imgMax;
expW=parseInt((imgMax*imgW)/imgH);
}else{
expW=imgW;
expH=imgH;
} web.c.width=expW;
web.c.height=expH; web.ctx.drawImage(web.img_Id[0],0,0,expW,expH); imgDataUrl=web.c.toDataURL(); //默认输出PNG格式
//imgDataUrl=web.c.toDataURL("image/jpeg",0.8); //设置输出jpg格式,第二个参数为图片质量
web.expImg_Id[0].src=imgDataUrl;
}
})
}
}
</script>
</html>
最新文章
- .Net Core 跨平台系列之环境部署
- EJDK, Raspberry Pi, and NetBeans IDE 8
- 说说Java生态圈的那些事儿
- OpenJudge计算概论-错误探测
- 实例源码--Android理财工具源码
- Msp430概述
- leetcode problem 41 -- First Missing Positive
- AD域环境的搭建 基于Server 2008 R2
- 关于扩展IP地址空间的几个方案的探讨
- cuda编程学习2——add
- Page directive must not have multiple occurrences of pageencoding
- meta小结
- VB.NET 泛型类型的应用经验
- js运用5
- macOS 下NFS 文件系统挂载
- Bootstrap手风琴效果
- virtualBox NAT模式,设置虚拟机可上网,宿主机可访问虚拟机的方法
- UI设计技术分享:教你几个设计技巧让老板对你的设计赞不绝口
- js css等静态文件版本控制,一处配置多处更新.net版【原创】
- 【php正则】php正则匹配UTF-8格式的中文汉字 和 【,】【,】【。】等符号