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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
js时间查询插件使用详解
Apr 07 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 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 ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
微信小程序实现授权登录
2019/05/15 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python lambda和Python def区别分析
2014/11/30 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python如何定义带参数的装饰器
2018/03/20 Python
python如何统计序列中元素
2020/07/31 Python
Python解决八皇后问题示例
2018/04/22 Python
python实现简单登陆系统
2018/10/18 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
2014年护士工作总结范文
2014/11/11 职场文书