手机端利用JS压缩图片并上传
本人水平有限，如有错误，欢迎指正，谢谢！
思路：
1、手机端选择图片或拍照后，由于体积过大，上传到服务器端后，不仅占用服务器磁盘空间，而且打开速度慢，所以采用前端JS对图片进行压缩后上传。
2、服务器端用ASP进行接收并保存，返回上传后的图片文件名，手机端获取到图片后，利用URL即可打开上传后的图片。
3、可对图片文件格式及大小进行限制。
手机端：
<%@codepage="65001"%>
<%response.charset="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript">
function right(mainStr,lngLen) {
if (mainStr.length-lngLen>=0 && mainStr.length>=0 && mainStr.length-lngLen<=mainStr.length) {
return mainStr.substring(mainStr.length-lngLen,mainStr.length)}
else{return null}
}
var fileext="";
window.οnlοad=function(){
var eleFile = document.querySelector('#jjfxSoft_iconPath');
// 压缩图片需要的一些元素和对象
var reader = new FileReader(),
img = new Image();
// 选择的文件对象
var file = null;
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// base64地址图片加载完毕后
img.onload = function () {
debugger
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制
var maxWidth = 1000, maxHeight = 1000;
// 目标尺寸
var targetWidth = originWidth, targetHeight = originHeight;
// 图片尺寸超过300x300的限制
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
// canvas对图片进行缩放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight);
var type = 'image/jpeg';
//将canvas元素中的图像转变为DataURL
var dataurl = canvas.toDataURL(type);
$("#ceshi1").attr("src",dataurl);
//抽取DataURL中的数据部分，从Base64格式转换为二进制格式
var bin = atob(dataurl.split(',')[1]);
//创建空的Uint8Array
var buffer = new Uint8Array(bin.length);
//将图像数据逐字节放入Uint8Array中
for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
//利用Uint8Array创建Blob对象
var blob = new Blob([buffer.buffer], {type: type});
var url = window.URL.createObjectURL(blob);
// $("#ceshi").attr("src",url);
//在这里上传blob
var formData=new FormData();
formData.append("file",blob,"abc.jpg");
$.ajax({
type: 'post',
url: "SavePhoto.asp?bs="+$("#bs").text()+"&fileext="+fileext, //上传文件的请求路径必须是绝对路劲
data: formData,
cache: false,
processData: false,
contentType: false,
}).success(function (data) {
if(data==-1){
alert("对不起，上传资质文件最大为6MB！");
return;
}else{
//$("#mpic").attr("src","/Upload/"+data);
alert("照片上传成功！");
}
}).error(function () {
alert("照片上传失败");
});
};
// 文件base64化，以便获知图片原始尺寸
reader.onload = function(e) {
img.src = e.target.result;
};
eleFile.addEventListener('change', function (event) {
file = event.target.files[0];
fileext=right($("#jjfxSoft_iconPath").val(),4).toUpperCase();
if((fileext!=".JPG")&&(fileext!=".PNG")){
alert("对不起，文件格式不正确，只能上传JPG或PNG文件！");
return;
}
// 选择的文件是图片
if (file.type.indexOf("image") == 0) {
reader.readAsDataURL(file);
}
});
}
function up(){
$("#jjfxSoft_iconPath").click();
}
</script>
<title>物品照片上传</title>
</head>
<body style="list-style:none; color:#666; line-height:35px;">
<span id="bs" style="display:none;"><%=request.querystring("bs")%></span>
<img id="ceshi" style="display:none;">
<div style="width:100%;">
<li style=" width:90%; margin-left:5%;">点击图片上传照片</li>
<img id="ceshi1" src="data:images/uploadpic.png" style="width:90%; margin-left:5%;" onClick="up();">
<li style="width:90%; margin-left:5%;">文件大小不超过6MB，JPG或PNG格式</li>
</div>
<input name="file" type="file" id="jjfxSoft_iconPath" style="display:none;">
</body>
</html>
服务器接收端：SavePhoto.asp
<%@codepage="65001"%>
<%response.charset="utf-8"%>
<%
Randomize
function GetRndFileName(namelen)
clist="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
jg=""
for i=1 to namelen
p=INT(62*RND())+1
jg=jg&mid(clist,p,1)
next
GetRndFileName=jg
end function
fileext=request.querystring("FileExt")
BS=request.querystring("bs")
filename="P"&GetRndFileName(10)&fileext
Dim FormData, FormSize , DataStart , CLStr
FormSize = Request.TotalBytes
FormData = Request.BinaryRead(FormSize)
set alldata=server.createobject("ADODB.Stream")
alldata.Type=1
alldata.open
alldata.Write FormData
dim Binary
alldata.position=0
Binary=alldata.Read
CLStr=ChrB(13)&ChrB(10)
DataStart=InStrB(Binary,CLStr&CLStr)+4
DivStr = LeftB(Binary,InStrB(Binary,CLStr)-1)
DataSize=InStrB(DataStart+1,Binary,DivStr)-DataStart-2
if fix(DataSize/1024)>6144 then
alldata.close
set alldata=nothing
response.write "-1"
response.end
end if
set st=Server.CreateObject("ADODB.Stream")
st.Type=1
st.Mode=3
st.open
alldata.position=DataStart-1
alldata.copyto st,DataSize
st.SaveToFile Server.MapPath("/Upload/"&filename),2
st.close
set st=nothing
alldata.close
set alldata=nothing
response.write filename
response.end
%>
手机端利用JS压缩图片并上传相关推荐
- js 导出pdf上传至oss_前端上传图片到oss，压缩图片后上传至oss（补充图片文件旋转90度问题）...
上传图片如果过大,等待时间过长体验不好,于是使用js压缩图片再上传,无关图片清晰度. /** * 压缩图片 * @param file 图片文件 * @param callback 回调函数,压缩完要 ...
- cropper.js 裁剪图片并上传（文档翻译+demo）（转）
官网http://fengyuanchen.github.io/cropper/ 文档https://github.com/fengyuanchen/cropper/blob/master/READM ...
- html图片上传布局,上传图片（压缩图片再上传），布局参考以前的文章（https://www.jianshu.com/p/d379ab1b3eec）...
引入一个js: 百度网盘链接:https://pan.baidu.com/s/1KO9gH4r6bP-foYVAQn5AxQ 提取码:mgcm 复制这段内容后打开百度网盘手机App,操作更方便哦 ht ...
- h5压缩图片并上传到oss
需求背景:h5上传图片到oss,并返回图片的链接 参考资料: 阿里云oss multipartUpload api 图片纯前端JS压缩的实现 注意:以下不包括业务代码,纯个人处理的oss上传封装,替换 ...
- php支持上传音乐播放网,基于ThinkPHP5框架开发的响应式在线音乐播放网站PHP源码+WAP手机端|在线支付+会员购买+音乐上传...
源码介绍 基于ThinkPHP5框架开发的响应式在线音乐播放网PHP源码,是一款开源的跨平台音乐管理系统,基于国内最优秀的开源框架ThinkPHP5.0.11内核开发的在线DJ音乐播放分享网站,完全免 ...
- thumbnailator压缩图片并上传文件服务器
1.引入pom <!--thumbnailator 压缩工具--><dependency><groupId>net.coobird</groupId>& ...
- 原生js实现图片单张上传及批量上传
效果图: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
- java等比压缩图片_java上传并压缩图片（等比例压缩或者原尺寸压缩）
先看效果: 原图:1.33M 处理后:27.4kb 关键代码; package codeGenerate.util; import java.awt.Color; import java.awt.Gr ...
- php图片提交,php+js实现图片的上传、裁剪、预览、提交示例
首先用到的语言是php.插件imgareaselect(),没有太多花哨的样式,index.php代码如下: function preview(img, selection) { $('#select ...
最新文章
- WEB 打印的相关技术分析
- ValueError: y_true and y_pred contain different number of classes 9, 2. Please provide the true labe
- 赠书 | 热潮下的冷思考，人工智能即将改变的三大领域
- Swift中关于元组的某些特性
- golang web开发框架 Beego
- 初探面向对象编程之oop与设计模式
- 厉害了，淘宝千万并发，14 次架构演进…
- HDOJ 4699-Editor[栈]
- 转发和重定向和request域对象
- 解决‘C:\Program‘ 不是内部或外部命令，也不是可运行的程序或批处理文件
- SAP Spartacus 电商云 UI Shipping Method 在单元测试环境下没有显示的问题
- ant 彻底了解（转）
- 手绘水彩卡通插画 | 艺术品因有灵魂而珍藏
- opencore0.6.4_iOS 13.4/iPadOS 13.4正式版发布：iCloud支持文件夹共享
- [CH5E02] A Little Shop of Flowers
- INFO：AdminStudio Debug
- 大概的知识点 有点乱（乱的一批）
- win7系统传奇如何架服务器,win7系统如何架设传奇服务端玩游戏更流畅
- 推荐 10 款 C++ 在线编译器
- 关于闲鱼测试数据构造，我有几条心得