Js利用Canvas实现图片压缩功能

 更新时间:2017年09月13日 07:51:04   作者:similar  
下面小编就为大家带来一篇Js利用Canvas实现图片压缩功能。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

最近做的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 实现 input type="file" 文件上传示例代码

    js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑、浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能
    2013-08-08
  • javascript字典探测用户名工具

    javascript字典探测用户名工具

    javascript字典探测用户名工具...
    2006-10-10
  • input输入框鼠标焦点提示信息

    input输入框鼠标焦点提示信息

    本文给大家分享的是一则非常常用和实用的小技巧,当鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现,推荐给小伙伴们
    2015-03-03
  • 聊聊Javascript中try catch的2个作用

    聊聊Javascript中try catch的2个作用

    try...catch 可以测试代码中的错误,try 部分包含需要运行的代码,而catch部分包含错误发生时运行的代码,这篇文章主要给大家介绍了关于Javascript中try catch的2个作用,需要的朋友可以参考下
    2021-09-09
  • JS实现定时自动消失的弹出窗口

    JS实现定时自动消失的弹出窗口

    这篇文章介绍了JS实现定时自动消失的弹出窗口,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • js移动端图片压缩上传功能

    js移动端图片压缩上传功能

    这篇文章主要为大家详细介绍了js移动端图片压缩上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 在layui下对元素进行事件绑定的实例

    在layui下对元素进行事件绑定的实例

    今天小编就为大家分享一篇在layui下对元素进行事件绑定的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS 截取字符串substr 和 substring方法的区别

    JS 截取字符串substr 和 substring方法的区别

    JS 截取字符串substr 和 substring方法的区别,需要的朋友可以参考下,根据需要自行选择。
    2009-10-10
  • JS实现躲避粒子小游戏

    JS实现躲避粒子小游戏

    这篇文章主要为大家详细介绍了JS实现躲避粒子小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • JavaScript建立一个语法高亮输入框实现思路

    JavaScript建立一个语法高亮输入框实现思路

    通常网站自带的textarea编辑器不能满足我们的需求比如高亮显示代码等,在这篇文章中,我将使用JavaScript库ACE来创建一个输入框效果,该脚本允许开发人员创建支持语法高亮的输入框,感兴趣的你可不要错过了哈
    2013-02-02

最新评论