使用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打造磨砂玻璃背景效果
Sep 28 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 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
PHP中数组的三种排序方法分享
2012/05/07 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
浅谈js中的闭包
2015/03/16 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
Python实现某论坛自动签到功能
2019/08/20 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
jupyter 添加不同内核的操作
2021/02/06 Python
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle