//压缩图片方法
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文件)的更多相关文章

  1. HTML-js 压缩上传的图片方法(默认上传的是file文件)

    //压缩图片方法 function compressImg(file,callback){ var src; var fileSize = parseFloat(parseInt(file['size ...

  2. 上传GIF图片方法!

    有朋友问,如何上传GIF图片,在此做一下说明.方法是:在第二栏“上传图片”栏——选择“无水印”——选择文件(找到文件)——点击上传——点击插入——我选的图片 ——上传成功了!

  3. iOS 上传的图片在HTML上显示时,图片方向信息(EXIF Orientation)异常

    将iPhone 6s拍摄的照片上传到服务器之后, 在Web网页上看到图片被逆时针旋转了90度, 这让我很惆怅呐! 出现这个问题其实是因为上传的图片为.jpg格式,.jpg文件含有EXIF信息, 其中E ...

  4. HTML+js+css实现点击图片弹出上传文件窗口的两种思路

    第一种:CSS实现 <style><!-- .fileInputContainer{        height:256px;        background:url(upfil ...

  5. ASP.NET MVC 中CSS JS压缩合并 功能的使用方法

    通过压缩合并js文件和css文件,可以减少 服务器的响应 次数和 流量,可以大大减小服务器的压力,对网站优化有比较明显的帮助!压缩合并 css 文件和js文件是网站优化的一个 比较常用的方法. ASP ...

  6. MVC&WebForm对照学习:文件上传(以图片为例)

    原文  http://www.tuicool.com/articles/myM7fe 主题 HTMLMVC模式Asp.net 博客园::首页::  ::  ::  ::管理 5 Posts :: 0 ...

  7. 如何预览将要上传的图片-使用H5的FileAPI

    这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...

  8. ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制

    我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...

  9. flask 之上传本地图片

    项目配置 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import os class Config(object): DEBUG = True SQLALCHEMY_DATABA ...

随机推荐

  1. 前端 - jsonp 跨域ajax

    jsonp 跨域ajax原理: 浏览器同源策略限制 如何解决同源策略限制: 方式一: 利用创建script块,在其中执行src属性为 远程url 异域 用函数(返回值) 的形式返回参数 方式二: jq ...

  2. mysql数据库卸载和安装

    背景: 由于之前一个项目中用的数据库版本是免安装的mysql5.5.36,但是后来经过第三方测试公司测试出该数据库存在很多漏洞需要升级数据库才能解决.所以觉得将数据库更换为mysql-5.7.21-w ...

  3. 百度统计api 关于搜索引擎返回参数问题

    当 post 的参数: 返回参数为: 很显然没有搜索引擎的相关名称返回,无法分辨相关引擎的数据量: 改:去掉 gran 参数 正常: 关于百度统计文档有很多模糊不清的地方,可以发邮件给官方了解,一般处 ...

  4. [转] Understanding-LSTMs 理解LSTM

    图文并茂,讲得极清晰. 原文:http://colah.github.io/posts/2015-08-Understanding-LSTMs/ colah's blog Blog About Con ...

  5. LwIP Application Developers Manual11---Initializing lwIP

    1.前言 2.Initialization for simple lwIP 查看doc/rawapi.txt来获得更多官方信息 #if NO_SYS /* Network interface vari ...

  6. PHP相关学习

    PHP环境安装 使用wamp一键集成环境.在文件httpd-vhosts.conf 本地配置 本地存储的位置,即index.php所在的位置()路由重定向 配置完环境需要重新启动wamp!!!!!! ...

  7. C++、VC++、MFC网页自动注册、登陆、发帖、留言,QQ注册、QQ申请器源码、注册邮箱源码、自动发帖源码

    C++.VC++.MFC网页自动注册.登陆.发帖.留言,QQ注册.QQ申请器源码.注册邮箱源码.自动发帖源码   参考资料: 自动登录yahoo邮箱http://blog.csdn.net/suisu ...

  8. 题解-TIOJ1905 最理想的身高差

    Problem 题目原型 题目大意:求区间最小差值 序列长度\(1e5\),询问\(2e5\) Solution 总体思路就是找出所有可能作为答案的点对,用资料结构_(:зゝ∠)_维护,然后询问 至于 ...

  9. Codeforces 675D Tree Construction Splay伸展树

    链接:https://codeforces.com/problemset/problem/675/D 题意: 给一个二叉搜索树,一开始为空,不断插入数字,每次插入之后,询问他的父亲节点的权值 题解: ...

  10. vue中更换.ico图标报错路径找不到图片

    问题描述: vue项目中,想要更换.ico图片,更换完成后刷新页面报错,找不到路径. 解决: 更换完图片,重新启动下vue项目(npm run dev)就可以啦~ 哈哈哈 补充知识: 网页title旁 ...