使用canvas压缩图片上传的方法示例


Posted in HTML / CSS onFebruary 07, 2020

因为原型图跟插件ui有出入,所以自己写了一个方法。。

首先得有一个上传按钮。

<input type="file" id="fileys" class="fileys" @change="uploadFile($event)" accept="image/*"/>
<!--uploadFile用change是因为。用户可能会重复选其他图片-->

入正题:

uploadFile:function(event){
let file = event.target.files[0]; //获取input的图片file值
let param = new FormData(); // 创建form对象
if(param.getAll('file')[0] == "undefined"){
        return false        //判断是不是空
      }
      
 let reader = new FileReader() 
  reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式 ,,,网上文档好像规定了格式。。我就选了一个base64
  
  
  reader.onload = function(e) { // 文件读取完成时触发  
      let result = e.target.result // base64格式图片地址  
      var image = new Image()
      image.src = result // 设置image的地址为base64的地址  
      image.onload = function(){  
        var canvas = document.getElementById("canvas");  
        var context = canvas.getContext("2d");  
        canvas.width = image.width; // 设置canvas的画布宽度为图片宽度  
        canvas.height = image.height; 
        context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上绘制图片  
        let dataUrl = canvas.toDataURL('image/jpeg', 0.001) //设置压缩比,可根据需要设置,设置过小会影响图片质量,dataUrl 为压缩后的图片资源,可将其上传到服务器  
  let tupian =  _this.dataURLtoFile(dataUrl, file.name)
        param.append('file', tupian);//对应后台接收图片名 

        //然后这里就可以写axios方法。去将这个param上传到后台

           } 
       } 
  
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 3D位移translate效果实例介绍
May 03 HTML / CSS
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 #HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 #HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 #HTML / CSS
Html5定位终极解决方案
Feb 05 #HTML / CSS
canvas简单连线动画的实现代码
Feb 04 #HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 #HTML / CSS
canvas实现烟花的示例代码
Jan 16 #HTML / CSS
You might like
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
Python如何读取、写入CSV数据
2020/07/28 Python
python 代码运行时间获取方式详解
2020/09/18 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
小学英语教学反思案例
2014/02/04 职场文书
企业总经理任命书
2014/06/05 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
2014年教学工作总结
2014/11/13 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS