当前位置: 萬仟网 > IT编程>网页制作>CSS > 前端压缩上传图片

前端压缩上传图片

2019年05月15日 07:37  | 萬仟网IT编程  | 我要评论
  1 <!doctype html>
  2 <html>
  3 
  4 <head>
  5     <meta charset="utf-8">
  6     <title>前端压缩上传图片</title>
  7     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  8 </head>
  9 
 10 <body>
 11     <input type="file" id="picfile" onchange="readfile(this)" />
 12     <img id="img" src="" alt="" />
 13     <script>
 14         function readfile(obj) {
 15             var file = obj.files[0];
 16             //判断类型是不是图片 
 17             if (!/image\/\w+/.test(file.type)) {
 18                 alert("请确保文件为图像类型");
 19                 return false;
 20             }
 21             var reader = new filereader();
 22             reader.readasdataurl(file);
 23             reader.onload = function(e) {
 24                 dealimage(this.result, { quality: 0.5 }, function(base) {
 25                     //调用
 26                     var blob = dataurltoblob(base);
 27                     var newfile = new file([blob], file.name, { type: file.type });
 28                     console.log(newfile)
 29 
 30                     let r = new filereader(); //本地预览
 31                     r.onload = function() {
 32                         $('#img').attr("src", r.result);;
 33                     }
 34                     r.readasdataurl(newfile); //base64
 35 
 36                     // upload(newfile);
 37                 });
 38             }
 39         }
 40 
 41         //将base64转换为blob
 42         function dataurltoblob(dataurl) {
 43             var arr = dataurl.split(','),
 44                 mime = arr[0].match(/:(.*?);/)[1],
 45                 bstr = atob(arr[1]),
 46                 n = bstr.length,
 47                 u8arr = new uint8array(n);
 48             while (n--) {
 49                 u8arr[n] = bstr.charcodeat(n);
 50             }
 51             return new blob([u8arr], { type: mime });
 52         }
 53 
 54 
 55         function upload(file) {
 56             var that = this;
 57             // 创建form对象
 58             let param = new formdata();
 59             // 通过append向form对象添加数据
 60             param.append('img', file);
 61             // 文件大小
 62             param.append('size', file.size);
 63             for (var n in that.params) {
 64                 param.append(n, that.params[n]);
 65             }
 66             
 67             // 创建ajax
 68             var xhr = new xmlhttprequest();
 69 
 70             xhr.onload = function() {
 71                 console.log(xhr.responsetext)
 72             }
 73             xhr.open("post", "yourapi", true);
 74 
 75             // 发送表单数据
 76             xhr.send(param);
 77         }
 78         /**
 79          * 图片压缩,默认同比例压缩
 80          * @param {object} path
 81          * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径
 82          * @param {object} obj
 83          * obj 对象 有 width, height, quality(0-1)
 84          * @param {object} callback
 85          * 回调函数有一个参数,base64的字符串数据
 86          */
 87         function dealimage(path, obj, callback) {
 88             var img = new image();
 89             img.src = path;
 90             img.onload = function() {
 91                 var that = this;
 92                 // 默认按比例压缩
 93                 var w = that.width,
 94                     h = that.height,
 95                     scale = w / h;
 96                 w = obj.width || w;
 97                 h = obj.height || (w / scale);
 98                 var quality = obj.quality || 0.7; // 默认图片质量为0.7
 99                 //生成canvas
100                 var canvas = document.createelement('canvas');
101                 var ctx = canvas.getcontext('2d');
102                 // 创建属性节点
103                 var anw = document.createattribute("width");
104                 anw.nodevalue = w;
105                 var anh = document.createattribute("height");
106                 anh.nodevalue = h;
107                 canvas.setattributenode(anw);
108                 canvas.setattributenode(anh);
109                 ctx.drawimage(that, 0, 0, w, h);
110                 // 图像质量
111                 if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
112                     quality = obj.quality;
113                 }
114                 // quality值越小,所绘制出的图像越模糊
115                 var base64 = canvas.todataurl('image/jpeg', quality);
116                 // 回调函数返回base64的值
117                 callback(base64);
118             }
119         }
120     </script>
121 </body>
122 
123 </html>

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • VueRouter认识

    1、 什么是路由? 注意:作为vue的插件,需要单独引入js文件,且必须在vue.js之后引入。 <router-link to=“跳转路径”... [阅读全文]
  • 零基础:如何快速学习JavaScript,html+css技术

    前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML、CSS和JavaScript这些基础知识点,但达妹今天想强调一下,学前端开发除了要学这些... [阅读全文]
  • Web基础--HTML、Css

    Web基础--HTML、Css

    一、Web项目(可跳过,直接从下一个标题开始) 1、Web项目: 指的是带网页的项目,通过浏览器可以访问的项目。比如:淘宝、天猫等。 2、Web项目... [阅读全文]
  • CSS是什么

    css是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标... [阅读全文]
  • vue初级使用

    一、Vue是什么? Vue(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vu... [阅读全文]
  • HTML连载21-序选择器上

    HTML连载21-序选择器上

    解释CSS3 中新增的选择器中最具有代表性的就是序选择器,大致可以分为两类: (1)同级别的第几个(2)同类型的第几个 先写一个公共代码 1.选中同... [阅读全文]
  • 哪些技术会决定前端开发者的未来发展?

    哪些技术会决定前端开发者的未来发展?

    2019年下半年即将到来,上半年狂风骤雨般的裁员浪潮让每一位从业者背脊发凉,在经历了五六年黄金发展期之后,前端开发这个行业似乎也进入了转折点。 我一... [阅读全文]
  • 关于阿里 iconfont 的使用步骤

    关于阿里 iconfont 的使用步骤

    第一步: 在iconfont库中,找到你想要的图标,加入到购物车,再在购物车中将图标加入到你的项目中去 第二步: 在项目中,可以看到刚刚加入的图标,... [阅读全文]
  • flex 布局学习

    flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看... [阅读全文]
  • web前端布局HTML+CSS

    web前端布局HTML+CSS

    1、W3C标准 万维网联盟(外语缩写:W3C)标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Pr... [阅读全文]

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com