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 相关文章推荐
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 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
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
浅析vue数据绑定
2017/01/17 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
六月份红领巾广播稿
2014/02/03 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2014年招商工作总结
2014/11/22 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby