js 压缩上传的图片方法(默认上传的是file文件)
//压缩图片方法
function compressImg(file,callback){
var src;
var fileSize = parseFloat(parseInt(file['size'])/1024/1024).toFixed(2);
var read = new FileReader();
read.readAsDataURL(file);
read.onload = function (e) {
var img = new Image();
img.src = e.target.result;
img.onload = function(){
//默认按比例压缩
var w = this.width,
h = this.height;
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var base64;
// 创建属性节点
canvas.setAttribute("width", w);
canvas.setAttribute("height", h);
ctx.drawImage(this, 0, 0, w, h);
if(fileSize<1){
//如果图片小于一兆 那么不执行压缩操作
base64 = canvas.toDataURL(file['type'], 1);
}else if(fileSize>1&&fileSize<2){
//如果图片大于1M并且小于2M 那么压缩0.5
base64 = canvas.toDataURL(file['type'], 0.5);
}else{
//如果图片超过2m 那么压缩0.2
base64 = canvas.toDataURL(file['type'], 0.2);
}
// 回调函数返回file的值
callback(base64);
};
};
};
图片压缩完成以后会转换成base64返回
js 压缩上传的图片方法(默认上传的是file文件)的更多相关文章
- HTML-js 压缩上传的图片方法(默认上传的是file文件)
//压缩图片方法 function compressImg(file,callback){ var src; var fileSize = parseFloat(parseInt(file['size ...
- 上传GIF图片方法!
有朋友问,如何上传GIF图片,在此做一下说明.方法是:在第二栏“上传图片”栏——选择“无水印”——选择文件(找到文件)——点击上传——点击插入——我选的图片 ——上传成功了!
- iOS 上传的图片在HTML上显示时,图片方向信息(EXIF Orientation)异常
将iPhone 6s拍摄的照片上传到服务器之后, 在Web网页上看到图片被逆时针旋转了90度, 这让我很惆怅呐! 出现这个问题其实是因为上传的图片为.jpg格式,.jpg文件含有EXIF信息, 其中E ...
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
第一种:CSS实现 <style><!-- .fileInputContainer{ height:256px; background:url(upfil ...
- ASP.NET MVC 中CSS JS压缩合并 功能的使用方法
通过压缩合并js文件和css文件,可以减少 服务器的响应 次数和 流量,可以大大减小服务器的压力,对网站优化有比较明显的帮助!压缩合并 css 文件和js文件是网站优化的一个 比较常用的方法. ASP ...
- MVC&WebForm对照学习:文件上传(以图片为例)
原文 http://www.tuicool.com/articles/myM7fe 主题 HTMLMVC模式Asp.net 博客园::首页:: :: :: ::管理 5 Posts :: 0 ...
- 如何预览将要上传的图片-使用H5的FileAPI
这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...
- ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制
我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...
- flask 之上传本地图片
项目配置 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import os class Config(object): DEBUG = True SQLALCHEMY_DATABA ...
随机推荐
- [转载]Tensorflow 的reduce_sum()函数的axis,keep_dim这些参数到底是什么意思?
转载链接:https://www.zhihu.com/question/51325408/answer/125426642来源:知乎 这个问题无外乎有三个难点: 什么是sum 什么是reduce 什么 ...
- vmware启动虚拟机发现没权限
前期安装未参与,但了解大致情况: 物理机上安装CentOS7系统,然后安装VMWare,虚拟了几台CentOS6 遇到的问题:物理机重启后,以root进入系统,但打开VMWare显示是普通用户权限,以 ...
- Linux 下的dd命令使用详解(摘录)【转】
转自:https://www.cnblogs.com/jikexianfeng/p/6103500.html 一.dd命令的解释 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意 ...
- vue之递归组件实现树形目录
递归组件的应用===>可以通过组件命名来自己使用自己的组件 实例如下 父组件 <div class="content"> <detail-list :lis ...
- better-scroll和swiper使用中的坑
better-scroll 1.我的 better-scroll 初始化了, 但是没法滚动. 按照文档使用后,发现可以原生滚动,但是不能弹性滑动,后面发现是最外层容器没给设置固定高度 ,设置固定 ...
- 设计模式C++学习笔记之十(Builder建造者模式)
建造者模式,将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示.一段晦涩难懂的文字,实现创建不同表示的方法就是给创建的过程传入创建的参数.详细的还是看代码吧. 10.1.解释 ...
- 用VC进行64位编程
用VC进行64位编程 分类: C/C++2014-04-30 15:14 532人阅读 评论(0) 收藏 举报 本文转自:http://www.usidcbbs.com/read-htm-tid-52 ...
- jvm 监控工具
背景 不懂jvm监控工具好意思说自己搞java的吗.其实搞了十多年的人我都见过不懂得,不懂不要紧,老实工作就行啊.这就是属于非技术的话题了,实在不知从何说起.还是赶紧学习下吧,可以去装了.我认真学习后 ...
- vmware Harbor 复制功能试用
vmware Harbor 复制功能试用 Harbor基于策略的Docker镜像复制功能,可在不同的数据中心.不同的运行环境之间同步镜像,并提供友好的管理界面,大大简化了实际运维中的镜像管理工作. 功 ...
- RF运行脚本报错:WebDriverException: Message: unknown error: call function result missing
原因:浏览器驱动与浏览器版本不对应