js图片压缩和上传并显示
由于近期项目中需要做个图片压缩上传,所以就在网上找了些资料自己写了一个
html部分
<input id="file" type="file">
<img id="imga" src="" alt="">
js部分
var eleFile = document.querySelector('#file');
// 压缩图片需要的一些元素和对象
var reader = new FileReader();
var imga=document.getElementById('imga');
var img = new Image();
// base64地址图片加载完毕后
img.onload = function() {
var originWidth = this.width, //image resize 压缩后的宽
originHeight=this.height,
maxWidth = 400, maxHeight = 400,
quality = 0.8, //image quality 压缩质量
canvas = document.createElement('canvas'),
drawer = canvas.getContext("2d");
canvas.width = maxWidth;
canvas.height = originHeight/originWidth*maxWidth;
drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
//上传到七牛云base64
var base64 = canvas.toDataURL("image/jpeg", quality); // 这里就拿到了压缩后的base64图片
//console.log(base64);
//blob对象
canvas.toBlob(function(blob){
//console.log(blob)
}, "image/jpeg", quality);
var file = dataURLtoFile(base64, 'name');
console.log(file);
imga.src=base64; };
//base64转file
//filename图片的名字dataurl是base64地址
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
} // 文件base64化,以便获知图片原始尺寸
reader.onload = function() {
//reader.result就是base64
img.src = reader.result;
};
//addEventListener监听change事件
eleFile.addEventListener('change', function () {
file = this.files[0];
// 选择的文件是图片
if (file.type.indexOf("image") == 0) {
//console.log(file);
reader.readAsDataURL(file); //以数据url的方式读取文件内容 }
});
效果图
js图片压缩和上传并显示的更多相关文章
- js 图片压缩上传(base64位)以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
- js 图片压缩上传(纯js的质量压缩,非长宽压缩)
下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...
- JS—图片压缩上传(单张)
*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...
- js图片压缩上传
最近公司的移动产品相约app要做一次活动,涉及到图片上传,图片又不能太大,不然用户体验太差,必须先压缩再上传,所以用到了html5的canvas和FileReader,代码先上,小弟前端经验不足,代码 ...
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- 基于vue + axios + lrz.js 微信端图片压缩上传
业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
- 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
- Html5+asp.net mvc 图片压缩上传
在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...
随机推荐
- 3.Spring框架中的标签与配置文件分离
1.Spring框架中标签的配置 1. id属性和name属性的区别 * id -- Bean起个名字,在约束中采用ID的约束,唯一 * 取值要求:必须以字母开始,可以使用字母.数字.连字符.下划线. ...
- java虚拟机(十一)--GC日志分析
GC相关:java虚拟机(六)--垃圾收集器和内存分配策略 java虚拟机(五)--垃圾回收机制GC 打印日志相关参数: -XX:+PrintGCDetails -XX:PrintGCTimestam ...
- leyou_01_自定义异常处理器
1.自定义异常处理器,当程序发生异常时可以我们可以自己定义返回的,状态码和状态信息 2.当异常发生时调用我们的自定义异常 @RestController @RequestMapping("i ...
- 用Python输出一个杨辉三角的例子
用Python输出一个杨辉三角的例子 这篇文章主要介绍了用Python和erlang输出一个杨辉三角的例子,同时还提供了一个erlang版杨辉三角,需要的朋友可以参考下 关于杨辉三角是什么东西,右转维 ...
- jeecms 配置可以低级别用户流程
使用管理员admin登录后台,进入用户—>管理员(本站)à添加,填写用户名.密码等信息,如下图: 需要注意几个权限控制的问题: 1, 等级,值越大等级越高,等级高的管理员可以审核等级低的管理员 ...
- 享元模式(Flyweight、FlyweightFactory)(围棋棋子共享)
(使用共享对象可有效地支持大量的细粒度的对象.) 假设开发一个围棋程序,围棋程序的围棋的棋子包含了颜色.大小.位置等信息.在定义一个棋盘容器来存放这些棋子. 我们可以发现,棋盘的成员变量包含了一个棋子 ...
- js判断两个对象是否相等
function isObjectValueEqual(a, b) { if(typeof a == 'number' && typeof b == 'number'){ return ...
- c++ 链接mysql:error LNK2019: 无法解析的外部符号
使用VS2012编译项目报错如下: error LNK2019: 无法解析的外部符号 _mysql_real_connect@32,该符号在函数 _main 中被引用 error LNK2019: 无 ...
- Tensorflow技巧
1.尽量控制图片大小在1024以内,不然显存会爆炸. 2.尽量使用多GPU并行工作,训练下降速度快. 3.当需要被检测的单张图片里物体太多时,记得修改Region_proposals的个数 4.测试的 ...
- Jupyter notebook使用matplotlib不出图解决办法
1.在jupyter notebook使用plot的时候没有显示图像2.在命令行知道需要使用ipython --pylab进入ipython环境才能做出图像,jupyter notebook该怎么设置 ...