javaScript:压缩图片并上传
html代码:
<input id="file" type="file" name="filesName">
js代码:
var fileElement = document.getElementById('file'); fileElement.onchange = function(){
var file = event.target.files[0];
var upload = new uploadThumbnail({
// name:"imgFileName", //缺省为 'imgs'
// formName:"formName", //缺省为 'forms'
// max:[maxWidth,maxHeight], //缺省为 [400*400]
file:file,
url:"./thumbnail.php",
dataType:"json", //缺省为 'text'
success:function( data ){
console.info( data ); //打印接收的数据
//this.newImgObj 为压缩后的图片对象
document.body.append( this.newImgObj ) // 将图片加入页面
}
});
upload.explain(); //在控制台打印说明
}
uploadThumbnail 对象:
(function(win,undefined){
'use strict'
var uploadThumbnail = function( obj ){
this.newImgObj = null;
this.init( obj );
this.success = obj.success || function () {};
}
uploadThumbnail.prototype = {
constructor:uploadThumbnail,
// 入口函数
init:function( obj ){
this.compressPictures( obj );
},
// 压缩图片 并将画布传入上传函数
compressPictures:function( obj ){
obj = obj || {};
obj.file = obj.file || "undefined";
obj.url = obj.url || "undefined";
var objThis = this;
if( obj.file == "undefined" || obj.url == "undefined" ){
console.info( "uploadThumbnail: 'file' and 'url' are required" );
return false
};
// 压缩图片需要的一些元素和对象
var reader = new FileReader(), newImg = new Image();
// 缩放图片需要的canvas
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( '2d' );
if ( obj.file.type.indexOf( "image" )==0 ) {
reader.readAsDataURL( obj.file );
// 文件base64化,以便获知图片原始尺寸
reader.onload = function( e ) {
newImg.src = e.target.result;
// base64地址图片加载完毕后
newImg.onload = function () {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制
var maxWidth, maxHeight;
try{
maxWidth = obj.max[0];
maxHeight = obj.max[1];
}catch( err ){
maxWidth = 400;
maxHeight = 400;
}
// 目标尺寸
var targetWidth = originWidth, targetHeight = originHeight;
// 图片尺寸超过400x400的限制
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( newImg,0,0,targetWidth,targetHeight); // 完成画布传入上传
objThis.upFile( obj,canvas );
};
};
}else{
return false;
}
},
upFile:function( obj,canvas ){
var objThis = this;
// canvas转为blob并上传
canvas.toBlob(
function (blob) {
// 生成图片
var newImg = document.createElement("img"),
url = URL.createObjectURL(blob);
newImg.onload = function() {
URL.revokeObjectURL(url);
};
obj.img == true
? newImg.src = canvas.toDataURL()
: newImg.src = url;
objThis.newImgObj = newImg; // 创建表单数据
var formData = new FormData();
formData.append( obj.formName || 'forms',blob,obj.name || 'imgs' ); // 图片上传
var request = new XMLHttpRequest();
// obj.async ? obj.async = true : obj.async = false;
request.open( "POST",obj.url,true );
request.send( formData );
request.onreadystatechange = function() {
if ( request.readyState == 4 && request.status == 200 ) {
if( obj.dataType=="JSON" || obj.dataType=="json" ){
try{
objThis.success( JSON.parse(request.responseText) )
}catch( err ){
console.info( "banfeng reminds you: Error in converting received data to 'JSON' format" )
}
}else{
objThis.success( request.responseText )
}
}
};
},
obj.file.type || 'image/png',
);
},
explain:function(){
console.group( "This is uploadThumbnail" );
console.log( 'new uploadThumbnail({' +
'\n\tname:imgFileName || "imgs",' +
'\n\tformName:formName || "forms",' +
'\n\tmax:[maxWidth,maxHeight] || [ 400*400 ],' +
'\n\tfile:inputFile,' +
'\n\turl:URL,' +
'\n\tdataType:"json" || "text"' +
'\n\tsuccess:functon(data){} Callback function on success' +
'\n});' +
"\nobj.newImgObj:Compressed image object" )
console.groupEnd();
}
}
win.uploadThumbnail = uploadThumbnail;
}(window));
javaScript:压缩图片并上传的更多相关文章
- 使用canvas压缩图片 并上传
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结
相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...
- HTML5 Canvas前台压缩图片并上传到服务器
1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...
- html5压缩图片并上传
手机端图片有很大的,上传的时候很慢,这时候就要压缩一下了,有一个开源的js可以压缩图片的大小,开源地址如下:https://github.com/think2011/localResizeIMG3 代 ...
- js压缩图片并上传,不失真,保证图片清晰度
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- Xamarin.Android 压缩图片并上传到WebServices
随着手机的拍照像素越来越高,导致图片赞的容量越来越大,如果上传多张图片不进行压缩.质量处理很容易出现OOM内存泄漏问题. 最近做了一个项目,向webservices上传多张照片,但是项目部署出来就会出 ...
- 微信小程序 压缩图片并上传
转自https://segmentfault.com/q/1010000012507519 wxml写入 <view bindtap='uploadImg'>上传</view> ...
- 微信小程序压缩图片并上传到服务器(拿去即用)
这里注意一下,图片压缩后的宽度是画布宽度的一半 canvasToTempFilePath 创建画布的时候会有一定的时间延迟容易失败,这里加setTimeout来缓冲一下 这是单张图片压缩,多张的压缩暂 ...
- 利用WebUploader进行图片批量上传,在页面显示后选择多张图片压缩至指定路径【java】
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...
随机推荐
- asp.net 按钮执行前后台方法——前台弹出提示信息,确认后继续执行后台方法,取消则不执行后台方法
我们做一个测试的web页面,只需要一个button+一个label就ok啦,通过button按钮的后台事件修改label的text属性值来测试是否执行了后台事件里的代码 前台 写一个js方法: < ...
- 尝试ipad编程 以失败告终
浏览器选择: safari,iOS内置浏览器,好用,不过有些限制 iPad上的 safari可以把网页保存为pdf,比iphone上的功能强大多了 qq浏览器用来下载文件,之后文件还可以复制到文件管理 ...
- mysql 生成时间序列数据 - 存储过程
由于时间自动转换为int值, 做一步转化,也可在调用时处理 use `test`; CREATE table test.test1 as SELECT state, id, `规格条码`, `色号条码 ...
- Vue 错误记录:Cannot read property 'beforeRouteEnter' of undefined
点击某路由链接,页面提示: Cannot read property 'beforeRouteEnter' of undefined 查看代码并无手写beforeRouterEnter设置, 把页面内 ...
- python selenium-webdriver 元素操作之键盘操作(五)
上节介绍了模拟鼠标对元素的操作,本节主要介绍键盘对元素的操作,实际过程中鼠标对元素的操作比键盘对元素的操作更经常使用,但是键盘对元素的操作也很重要,本节主要介绍一下键盘对元素的操作. selenium ...
- 【代码问题】MatConvNet+VS2017编译找不到cl.exe错误
用vl_compilenn做普通的CPU编译报错: 'cl.exe' 不是内部或外部命令,也不是可运行的程序 或批处理文件. 错误使用 vl_compilenn>check_clpath (li ...
- Arrays和String单元测试
20175227张雪莹 2018-2019-2 <Java程序设计> Arrays和String单元测试 要求 在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关 ...
- mybatis使用枚举优化
文章转自: https://segmentfault.com/a/1190000010755321 问题 在编码过程中,经常会遇到用某个数值来表示某种状态.类型或者阶段的情况,比如有这样一个枚举: p ...
- JNI内存泄露JNI ERROR (app bug): local reference table overflow (max=512)
原因是没即时释放对象,原本的代码是这样 static jobject getMaps(JNIEnv *env,jclass obj) { jclass stringbuilder_class = (* ...
- 修改GIT密码
修改GIT本地密码 控制面板->用户账户和家庭安全->凭证管理器->普通凭证:git:hhtp://*****