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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
javascript之更有效率的字符串替换
Aug 02 Javascript
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
jQuery手风琴的简单制作
May 12 jQuery
微信小程序 空白页重定向解决办法
Jun 27 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 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
一些星际专用术语解释
2020/03/04 星际争霸
博士208HAF收音机实习报告
2021/03/02 无线电
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
vuex 使用文档小结篇
2018/01/11 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python实现手机通讯录搜索功能
2018/02/22 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
django ajax发送post请求的两种方法
2020/01/05 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
python中wx模块的具体使用方法
2020/05/15 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
工程监理应届生求职信
2013/11/09 职场文书
党员承诺书内容
2014/03/26 职场文书
图书馆标语
2014/06/19 职场文书
搭讪开场白台词大全
2015/05/28 职场文书