Js利用Canvas实现图片压缩功能
2017-09-13 07:51
996 查看
最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢。为此,需要对图片进行压缩处理来优化上传功能。以下是具体实现:
/* * 图片压缩 * img 原始图片 * width 压缩后的宽度 * height 压缩后的高度 * ratio 压缩比率 */ function compress(img, width, height, ratio) { var canvas, ctx, img64; canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); img64 = canvas.toDataURL("image/jpeg", ratio); return img64; }
上面是一个图片压缩函数,返回 base64 格式的图片数据。 其中压缩比率取值(0 - 1 之间)越大图片质量越高。建议不要将图片转为 png 格式,因为转为 png 格式,图片的 base64 比转为 jpeg 的要长不少。下面是实际调用:
var image = new Image(); image.src = "/img/test.jpg"; image.onload = function(){ var img64 = compress(image, 500, 400, 0.7); document.getElementById("test").src = img64; }
注意: 压缩方法的调用以及图片src赋值必须放在图片的 onload 方法里面。因为只有等图片加载完成后才能进行压缩处理,从而转换为base64 进行赋值。 如果放在 onload 方法外面,则可能压缩代码无效,或者会生成一张纯黑色的图片。
以上这篇Js利用Canvas实现图片压缩功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- js+html5绘制图片到canvas的方法
- JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
- js实现canvas保存图片为png格式并下载到本地的方法
- 使用JavaScript+canvas实现图片裁剪
- js实现canvas图片与img图片的相互转换的示例
- JavaScript+html5 canvas实现图片破碎重组动画特效
- javascript结合canvas实现图片旋转效果
- js HTML5 canvas绘制图片的方法
- Canvas + JavaScript 制作图片粒子效果
- js canvas实现放大镜查看图片功能
- JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
相关文章推荐
- JS和Canvas实现图片的预览压缩和上传功能
- Js利用Canvas实现图片压缩
- [H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现
- js加canvas实现图片的预览压缩和上传
- js小方法+Canvas 利用js 实现浏览器保存图片到本地
- 移动端利用H5实现压缩图片上传功能
- vue.js 实现图片本地预览 裁剪 压缩 上传功能
- 前端JS利用canvas的drawImage()对图片进行压缩
- ddpowerzoomer.js利用jQuery扩展,实现对图片局部放大功能(源码分析)
- JS HTML图片显示Canvas 压缩功能
- 利用JS实现基本的图片轮播功能,包括鼠标的经过事件
- 利用HTML5,前端js实现图片压缩
- 用html5 canvas js 实现图片大小的压缩显示,图片上传后可在线预览。
- 利用js简单实现图片的放大缩小功能
- 利用canvas前端实现图片压缩后上传
- 利用canvas实现前端压缩图片
- JS中利用FileReader实现上传图片前本地预览功能
- js上传图片之前利用canvas压缩和转base64
- 【Android游戏开发十六】Android Gesture之【触摸屏手势识别】操作!利用触摸屏手势实现一个简单切换图片的功能!
- 如何利用JS实现复制/粘贴功能