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 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
js本地图片预览实现代码
Oct 09 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
js实现飞机大战小游戏
Aug 26 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中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
利用python实现数据分析
2017/01/11 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python global全局变量函数详解
2018/09/18 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
财务会计专业毕业生自荐信
2013/10/02 职场文书
给儿子的表扬信
2014/01/15 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
师德师风整改措施
2014/10/24 职场文书
安全责任书
2015/01/29 职场文书
教研活动主持词
2015/07/03 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python