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 相关文章推荐
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
javascript实现在线客服效果
Jul 15 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 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中使用临时表查询数据的一个例子
2013/02/03 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
php实现的双向队列类实例
2014/09/24 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
python列表操作实例
2015/01/14 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python实现12306火车票抢票系统
2019/07/04 Python
python list多级排序知识点总结
2019/10/23 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
人力管理专业毕业生求职信
2014/02/27 职场文书
学校开除通知书
2015/04/25 职场文书
2019年思想汇报
2019/06/20 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书