最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
canvas压缩图片转换成base64格式输出文件流
时间:2017-06-14 编辑:简简单单 来源:一聚教程网
昨天研究了一下canvas压缩图片的方法,上传上来给大家分享一下
代码如下 | 复制代码 |
// 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 varcanvas = document.getElementById('canvas'); varsource = document.getElementsByClassName('source'); varpreview = document.getElementsByClassName('preview'); canvas.style.display ="none"; window.onload =function() { //多张图片循环便利压缩 for(vari = 0; i < preview.length; i++) { varwidth = source[i].width; varheight = source[i].height; varcontext = canvas.getContext('2d'); //sx要绘制到canvas画布的源图片区域(矩形)在x轴上偏移量 varsx = 0; //sy要绘制到canvas画布的源图片区域(矩形)在y轴上偏移量 varsy = 0; //swidth要绘制到canvas画布中的源图片区域的宽度,如果没有制定这个值,宽度则是sx到图片最右边的距离 varsWidth = width; //sHeight要绘制到画布中的源图片区域的宽度,如果没有制定这个值,高度则是sy到图片最下边的距离 varsHeight = height; //dx源图片左上角在canvas画布上x轴上偏移量 vardx = 0; //dy源图片左上角在画布y轴上的偏移量 vardy = 0; //dwidth绘制图片的canvas画布宽度 //dHeight绘制图片的画布高度 vardWidth = width; vardHeight = height; varquality = 0.2; canvas.width = width; canvas.height = height; context.drawImage(source[i], sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); vardataUrl = canvas.toDataURL('image/jpeg', quality); preview[i].src = dataUrl; } // console.info(dataUrl); }; //遍历原图 for(vari = 0; i < source.length; i++) { source[i].src ='img/'+ (i + 1) +'.jpg'; } |
-
下一个: JavaScript编写一个贪吃蛇游戏
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31