html canvas压缩图片
2015-07-06 09:28
633 查看
function compress(img) {
<pre name="code" class="javascript"> var initSize = img.src.length; var width = img.width; var height = img.height; //如果图片大于四百万像素,计算压缩比并将大小压至400万以下 var ratio; if ((ratio = width * height / 4000000)>1) { ratio = Math.sqrt(ratio); width /= ratio; height /= ratio; }else { ratio = 1; } canvas.width = width; canvas.height = height; // 铺底色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); //如果图片像素大于100万则使用瓦片绘制 var count; if ((count = width * height / 1000000) > 1) { count = ~~(Math.sqrt(count)+1); //计算要分成多少块瓦片 // 计算每块瓦片的宽和高 var nw = ~~(width / count); var nh = ~~(height / count); tCanvas.width = nw; tCanvas.height = nh; for (var i = 0; i < count; i++) { for (var j = 0; j < count; j++) { tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh); ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh); } } } else { ctx.drawImage(img, 0, 0, width, height); } //进行最小压缩 var ndata = canvas.toDataURL('image/jpeg', 0.1); console.log('压缩前:' + initSize); console.log('压缩后:' + ndata.length); console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%"); tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0; return ndata; }
相关文章推荐
- HTML <!DOCTYPE> 标签
- html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法
- html常用的标签
- 浅析DOM 与 html ,xml。
- 学习html(7)
- C# ASP.NET MVC HtmlHelper用法大全
- MVC强类型视图、强类型HTML辅助方法
- HTML入门教程
- PartialView 在cshtml 用 @Html.Action() 和 @Html.Partial() 的区别
- Html 表格
- html页面的简单对话框(alert, confirm, prompt)
- HTML中ID与NAME的区别
- Html中input标签中的disabled属性要放在标签的最后面,否则结合隐藏标签使用时出错。
- html判断滚动条是否到达底部
- 学习html(6)
- HTML标签head详解
- HTML--框架
- html position display
- 基本的html页面
- 关于html头部引用(meta,link)