canvas压缩图片转换成base64格式输出文件流


Posted in Javascript onMarch 09, 2017

昨天研究了一下canvas压缩图片的方法,上传上来给大家分享一下

<!--调用canvas方法-->
 <canvas id="canvas"></canvas>
 <!--压缩后的图片路劲-->
 <img src="" class="preview">
 <img src="" class="preview">
 <!--原图压缩-->
 <img class="source" src="" style="display: none;">
 <img class="source" src="" style="display: none;">
// drawimage三种调用方法
 // ctx.drawImage(Image,dx,dy);
 // ctx.drawImage(Image,dx,dy,dWidth,dHeight);
 // ctx.drawImage(Image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);
 //images图片元素,出来预判还支持其他三种格式,分别是htmlvideoElement htmlcanvasElement imagebitmap
 //todataurl是canvas画布元素的方法,放回指定的图片格式的data url,也就是base64编码串
 //todataurl方法最多接受两个参数,并且这两个参数都是可选的:
 //type图片格式.支持3种方式,分别是image/jpeg images/png image/webp,默认是image.png
 var canvas = document.getElementById('canvas');
 var source = document.getElementsByClassName('source');
 var preview = document.getElementsByClassName('preview');
 canvas.style.display = "none";
 window.onload = function() {
 //多张图片循环便利压缩
 for(var i = 0; i < preview.length; i++) {
  var width = source[i].width;
  var height = source[i].height;
  var context = canvas.getContext('2d');
  //sx要绘制到canvas画布的源图片区域(矩形)在x轴上偏移量
  var sx = 0;
  //sy要绘制到canvas画布的源图片区域(矩形)在y轴上偏移量
  var sy = 0;
  //swidth要绘制到canvas画布中的源图片区域的宽度,如果没有制定这个值,宽度则是sx到图片最右边的距离
  var sWidth = width;
  //sHeight要绘制到画布中的源图片区域的宽度,如果没有制定这个值,高度则是sy到图片最下边的距离
  var sHeight = height;
  //dx源图片左上角在canvas画布上x轴上偏移量
  var dx = 0;
  //dy源图片左上角在画布y轴上的偏移量
  var dy = 0;
  //dwidth绘制图片的canvas画布宽度
  //dHeight绘制图片的画布高度
  var dWidth = width;
  var dHeight = height;
  var quality = 0.2;
  canvas.width = width;
  canvas.height = height;
  context.drawImage(source[i], sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
  var dataUrl = canvas.toDataURL('image/jpeg', quality);
  preview[i].src = dataUrl;
 }
 // console.info(dataUrl);
 };
 //遍历原图
 for(var i = 0; i < source.length; i++) {
 source[i].src = 'img/' + (i + 1) + '.jpg';
 }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
js实现select下拉框选择
Jan 11 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 #Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 #Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 #Javascript
js实现3D图片环展示效果
Mar 09 #Javascript
Vue监听数组变化源码解析
Mar 09 #Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 #Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 #Javascript
You might like
给初学PHP的5个入手程序
2006/11/23 PHP
escape unescape的php下的实现方法
2007/04/27 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
js实现倒计时关键代码
2017/05/05 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
考试作弊检讨书大全
2014/02/18 职场文书
市场拓展计划书
2014/05/03 职场文书
实验室标语
2014/06/21 职场文书
律师授权委托书范本
2014/10/07 职场文书
办公室主任个人总结
2015/02/28 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
仙境之桥观后感
2015/06/16 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
党章学习心得体会2016
2016/01/14 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android
MySQL优化及索引解析
2022/03/17 MySQL
Python正则表达式中flags参数的实例详解
2022/04/01 Python