js实现纯前端压缩图片


Posted in Javascript onNovember 16, 2020

本文实例为大家分享了js实现纯前端压缩图片的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>压缩图片</title>
</head>
<body>
 <input id='file' type="file">
 <script>
  var eleFile = document.querySelector('#file')
  var file;
  var render = new FileReader(), img = new Image();
  render.onload = function(e) {
   img.src = e.target.result
  }
  // 获取图片文件
  eleFile.addEventListener('change', function(e) {
   file = e.target.files[0];
   if(file.type.indexOf('image') === 0) {
    //读取文件,并返回一个URL格式的Base64字符串
    render.readAsDataURL(file)
   }
  })
 
  //使用canvas把图片画出来
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
 
  img.onload = function() {
 
   //原始尺寸
   var originWidth = this.width;
   var originHeight = this.height;
 
   //最大尺寸限制
   var maxWidth = 200, maxHeight = 200
 
   // 目标尺寸
   var targetWidth = originWidth, targetHeight = originHeight;
 
   //当原始尺寸大于200*200时候
   if(originWidth > maxWidth || originHeight > maxHeight) {
    if(originWidth / originHeight > maxWidth / maxHeight) {
     //更宽
     targetWidth = maxWidth;
     targetHeight = Math.round(maxWidth * (originHeight / originWidth))
    }else {
     targetHeight = maxHeight;
     targetWidth = Math.round(maxHeight * (originWidth / originHeight))
    } 
   }
 
   //画图
   canvas.width = targetWidth;
   canvas.height = targetHeight;
   //清除画布
   context.clearRect(0,0,targetWidth, targetHeight)
   //图片压缩
   context.drawImage(img, 0, 0, targetWidth, targetHeight);
   //canvas 转为blob并上传
   canvas.toBlob(function(blob) {
    try {
     var xhr = new XMLHttpRequest();
     xhr.onreadystatechange = function() {{
      if(xhr.status == 200) {
 
      }
     }}
     //开始上传
     xhr.open('POST','upload.php', true);
     xhr.send(blob)
    } catch (error) {
     console.log(error)
    }
    
   }, file.type || 'image/png')
   //在页面预览原图片
   var div1 = document.createElement('div')
   div1.innerText = '原图:'
   document.body.appendChild(div1)
   document.body.appendChild(img)
   //canvas预览
   var div2 = document.createElement('div')
   div2.innerText = 'canvas图:'
   document.body.appendChild(div2)
   document.body.appendChild(canvas)
  }
  
 </script>
</body>
</html>

分析:原理是用canvas的生成的图片,控制其大小来进行图片的压缩,需要注意的是,如果图片的尺寸太小,会导致图片模糊,使用时候,注意设置其比例控制。

1、通过FileReader读取图片文件,用 Image来装图片url(可以用来预览)
2、转化成base64字符串模式
3、通过maxWidth,MaxHeight和比例来控制最终的canvas的宽高
4、用canvas画图
5、在把canvas输出blob文件,进行上传

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 #Javascript
微信小程序自定义底部弹出框动画
Nov 18 #Javascript
vue 封装面包屑组件教程
Nov 16 #Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 #Javascript
小程序实现密码输入框
Nov 16 #Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 #Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 #Javascript
You might like
使PHP自定义函数返回多个值
2006/11/26 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
php之可变变量的实例详解
2017/09/12 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
js单例模式的两种方案
2013/10/22 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
深入研究React中setState源码
2017/11/17 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
简单的Python的curses库使用教程
2015/04/11 Python
Python输出各行命令详解
2018/02/01 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
详解Python是如何实现issubclass的
2019/07/24 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Python如何实现机器人聊天
2020/09/10 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
煤矿安全生产标语
2014/06/06 职场文书
学用政策心得体会
2014/09/10 职场文书
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript