前端通过canvas实现图片压缩
在一次的项目中,需要用户上传图片,目前市场随便一个手机拍出来的照片都是好几兆,直接上传特别占用带宽,影响用户体验,所以要求对用户上传图片进行压缩后再上传;那么前端怎么实现这个功能呢?
亲测可将4M图片压缩至100kb左右,代码如下:
<input id="file" type="file">
<script type="text/javascript">
var eleFile = document.querySelector('#file');
// 压缩图片需要的一些元素和对象
var reader = new FileReader(),
//创建一个img对象
img = new Image(); // 选择的文件对象
var file = null; // 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d'); // base64地址图片加载完毕后
img.onload = function() {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制,可通过国设置宽高来实现图片压缩程度
var maxWidth = 800,
maxHeight = 800;
// 目标尺寸
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(img, 0, 0, targetWidth, targetHeight);
/*第一个参数是创建的img对象;第二个参数是左上角坐标,后面两个是画布区域宽高*/
//压缩后的图片base64 url
/*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg';
* qualityArgument表示导出的图片质量,只要导出为jpg和webp格式的时候此参数才有效果,默认值是0.92*/
var newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式
//console.log(canvas.toDataURL('image/jpeg', 0.92));
preview.style.backgroundImage='url(' + newUrl + ')';
}; // 文件base64化,以便获知图片原始尺寸
reader.onload = function(e) {
img.src = e.target.result;
};
eleFile.addEventListener('change', function(event) {
file = event.target.files[0];
// 选择的文件是图片
if(file.type.indexOf("image") == 0) {
reader.readAsDataURL(file);
}
});
</script>
CSS样式如下(形成图片预览效果):
#preview {
display: inline-block;
width: 2.56rem;
height: 2.56rem;
position: relative;
background-image: url(img/iconfont-tianjia.png);
background-repeat: no-repeat;
background-size:cover ;
}
#file {
width: 100%;
height: 100%;
opacity:;
position: absolute;
left:;
top:;
cursor: pointer;
z-index:;
}
其原理是通过canvas结合js重新绘制一副 2d 图片,然后给canvas画布设置宽高来完成目标图片的压缩!
Demo地址:canvas实现图片压缩demo
详情参考HTML5 file API加canvas实现图片前端JS压缩并上传
前端通过canvas实现图片压缩的更多相关文章
- 使用FormData数据做图片上传: new FormData() canvas实现图片压缩
使用FormData数据做图片上传: new FormData() canvas实现图片压缩 ps: 千万要使用append不要用set 苹果ios有兼容问题导致数据获取不到,需要后台 ...
- HTML5 CANVAS 实现图片压缩和裁切
原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...
- WEB前端开发中的图片压缩
web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...
- java多图片上传--前端实现预览--图片压缩 、图片缩放,区域裁剪,水印,旋转,保持比例。
java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...
- Js利用Canvas实现图片压缩
最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 ...
- 利用html5的画布canvas进行图片压缩处理
在网上找的代码,按自己的需求改了下,忘记在哪找的了.这里记着方便自己以后学习. // 参数,最大高度 //var MAX_HEIGHT = 100; var MAX_WIDTH = 200; // 渲 ...
- 基于canvas的前端图片压缩
/*common*/ /** * canvas图片压缩 * @param {[Object]} opt [配置参数] * @param {[Function]} cbk [回调函数] * @retur ...
- 上传图片时压缩图片 - 前端(canvas)做法
HTML前端代码: <?php $this->layout('head'); ?> <?php $this->layout('sidebar'); ?> <m ...
- HTML5 file API加canvas实现图片前端JS压缩并上传
一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...
随机推荐
- 2、链接数据库+mongodb基础命令行+小demo
链接数据库并且打印出数据的流程:1.在CMD里面输入 mongod 2.在CMD里面输入 mongo 3.在输入mongodb命令行里面进行操作,首先输入 show dbs 来查看是否能够链接得上库4 ...
- hdu 3836 强连通+缩点:加边构强连通
#include<stdio.h>//求出其所有的强连通分量缩点,选出出度和入度最大的那个就是要求的边 #include<string.h> #include<stdli ...
- windows无法开机解决方法
电脑启动弹出错误Ntldr is missing , 解决方法:重新从xp中拷贝一个出来粘贴上就行 电脑启动弹出错误Ntldr is compressed ,表示分区中的文件被压缩了 解决方法:首先把 ...
- nodejs-app.js
设置静态目录 1 2 app.use(express.static(path.join(__dirname, 'public'))); //设置模版渲染的js,css,images的静态文件目录 设置 ...
- [SharePoint2010开发入门经典]8集成业务线数据,使用业务联通服务
本章概要: 1.了解office business application 2.理解商务联通服务(BCS),如何使用BCS构建OBA 3.通过BCS使用SharePoint和办公集成技术
- C++表达式求值(利用数据结构栈)
唉,刚刚用C++又又一次写了一个较完好的表达式求值程序,最后精简后程序还不到100行.这不经让我 想到了大一上学期刚学c语言时自己费了好大的劲,写了几百行并且功能还不是非常齐全(当时还不能计算有括号的 ...
- linux下測试硬盘读写速度
买了个ssd硬盘,就想着跟普通的机械盘做个比較.由于桌面装的是ubuntu系统,所以就想用linux的命令简单測一下好了 以下是ssd的性能数据: 測试写: xxx@WaitFish:~ > t ...
- 数据结构 - 归并排序(merging sort) 具体解释 及 代码
归并排序(merging sort) 具体解释 及 代码 本文地址: http://blog.csdn.net/caroline_wendy 归并排序(merging sort): 包括2-路归并排序 ...
- NSKeyedArchiver
如果对象是NSString.NSDictionary.NSArray.NSData.NSNumber等类型,可以直接用NSKeyedArchiver进行归档和恢复 不是所有的对象都可以直接用这种方法进 ...
- spark 随机森林算法案例实战
随机森林算法 由多个决策树构成的森林,算法分类结果由这些决策树投票得到,决策树在生成的过程当中分别在行方向和列方向上添加随机过程,行方向上构建决策树时采用放回抽样(bootstraping)得到训练数 ...