基于vue上传base64图片,通过canvas压缩base64
var that = this
if (e.target.files[0]) {
var file = e.target.files[0]
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function() {
img.src = this.result
}
var img = new Image,
width = 1024, //image resize 压缩后的宽
quality = 0.8, //image quality 压缩质量
canvas = document.createElement("canvas"),
drawer = canvas.getContext("2d");
img.onload = function() {
canvas.width = width;
canvas.height = width * (img.height / img.width);
drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
//上传到七牛云
var base64 = canvas.toDataURL("image/jpeg", quality); // 这里就拿到了压缩后的base64图片
var pic = base64.split(',')[1];
var url = "http://upload-z2.qiniu.com/putb64/-1";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
that.imgs.push(JSON.parse(xhr.responseText).data.key);
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken " + ‘七牛云token’);
xhr.send(pic);
// 清空文件上传控件的值 不清理会出现选择同样的图片会无法触发input事件了
e.target.value = null;
}
基于vue上传base64图片,通过canvas压缩base64的更多相关文章
- weui上传多图片,前端压缩,base64编码
记录一下在做一个报修功能的心路历程,需求功能很简单,一个表单提交,表单包含简单的文字字段以及图片 因为使用的是weui框架,前面的话去找weui的表单和图片上传组件,说实话,weui的组件写的还不错, ...
- ipcloud上传裁切图片,保存为base64再压缩传给后台
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- 通过FileWatcher,监听通过web上传的图片,并进行压缩
需求是这样的,通过web传输过来的图片,无论是JS上传,还是其他的上传方式,都需要生成2张缩略图,分别是用于商品列表的小图small,和用于分享的小图share.基于不同上传方式的不同需求,使用exe ...
- vue 上传二进制图片
1.前段代码 <el-form-item label="证件照片" prop="idImage"> <input @change='ss' t ...
- 使用FormData数据做图片上传: new FormData() canvas实现图片压缩
使用FormData数据做图片上传: new FormData() canvas实现图片压缩 ps: 千万要使用append不要用set 苹果ios有兼容问题导致数据获取不到,需要后台 ...
- js实现图片上传预览功能,使用base64编码来实现
实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...
- vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案
现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...
- vue : 检测用户上传的图片的宽高
需求: 用户可上传3-6张图片(第 1 2 3 张必须传),上传的图片必须是540 * 330 像素. 第一步,获取上传的图片的宽高. 初始化一个对象数组,宽高均设为0. 如果用户上传的图片没有上限, ...
- 基于spring-boot的web应用,ckeditor上传文件图片文件
说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的 ...
随机推荐
- url的匹配问题
1.例如我当前访问的路径是 127.0.0.1:8000/app01/customer/ 此时我需要在这个界面跳转另外一个界面127.0.0.1:8000/app02/books/,于是我定义一个a标 ...
- Python基本语法_基本数据类型_数值型详解
目录 目录 软件环境 Python变量调用的过程 数值型 删除一个数值类型对象 布尔型 Bool 标准整型 Int 长整型 双精度浮点型 Float 复数 数值类型对象的内建功能函数 absNumbe ...
- spring中的增强类型
在spring中有两种增强方式:XML配置文件和注解配置.下面一次为大家讲解. 使用的是Aspectj第三方框架 纯POJO (在XML中配置节点) 使用@AspectJ,首先要保证所用的JDK 是5 ...
- Object 的 property descriptor
property descriptor 属性描述符: o = { get foo() { return 17; } }; d = Object.getOwnPropertyDescriptor(o, ...
- CSS样式div
页面中,有很多样式标签:div标签,对标签定位的地方有: 1.<head>标签里加<style>标签,在<style>标签中添加样式.如: <style> ...
- 【命令汇总】nmap 使用教程
日期:2019-07-03 21:23:39 更新: 作者:Bay0net 介绍:汇总一下笔记里面的 nmap 使用方式 0x01. 基本信息 Nmap: the Network Mapper - F ...
- BigDecimal进行加减乘除计算
以前大部分关于查询计算的逻辑是在sql语句中执行的,但是有时候会出现比较复杂的计算情况,需要我们在代码中进行计算,这个时候使用BigDecimal进行计算会很方便. BigDecimal num1 = ...
- 【Qt开发】将内存图像数据封装成QImage V2
如何将内存图像数据封装成QImage 当采用Qt开发相机数据采集软件时,势必会遇到采集内存图像并进行处理(如缩放.旋转)操作.如果能够将内存图像数据封装成QImage,则可以利用QImage强大的图像 ...
- 关于telnet的妙用
1 使用telnet查看某个端口是否可以访问
- debian上安装mysql server
1 将mysql添加到apt的repository中 第一步,下载mysql提供的ppa文件 wget https://dev.mysql.com/get/mysql-apt-config_0.8.1 ...