上传base64图片并压缩
elementUI+react
布局
<Dialog
title="充值"
visible={ dialogVisible }
onCancel={ () => this.setState({ dialogVisible: false }) }
>
<Dialog.Body>
<Form labelWidth="120" ref={ e => {this.form=e} } model={ form } rules={ rules }>
<Form.Item label="支付凭证" prop="voucher">
<div className="my-upload">
<input className="upload-input" type="file" id="input" name="file1" onChange={ this.inputfile } />
{ voucher ? <img src={ voucher } className="avatar" alt="" /> : <i className="el-icon-plus avatar-uploader-icon" /> }
</div>
</Form.Item>
</Form>
</Dialog.Body>
<Dialog.Footer className="dialog-footer">
<Button onClick={ () => this.setState({ dialogVisible: false }) }>{'取 消'}</Button>
<Button type="primary" onClick={ this.saveContent } loading={ btnLoading }>{'确 定'}</Button>
</Dialog.Footer>
</Dialog>
完整方法:
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
Message('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
Message('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
}
// input onchange上传方法
inputfile =()=> {
const file1 = document.querySelector('#input').files[0]
// const flag = this.beforeAvatarUpload(file1)
// if(!flag){
// return false
// }
console.log(file1)
const that=this
if(file1){
var reader = new FileReader()
// 图片文件转换为base64
reader.readAsDataURL(file1)
reader.onload = function(){
// 显示图片
// document.getElementById('file1_img').src = this.result
// that.setState({
// voucher:this.result
// })
that.dealImage(this.result, 800, that.printing)
}
}
}
//回调方法
printing = base64 => {
// console.log('压缩后', base64.length / 1024)
this.setState({
voucher: base64
})
}
//压缩方法
dealImage = (base64, w, callback) => {
var newImage = new Image()
//压缩系数0-1之间
var quality = 0.6
newImage.src = base64
newImage.setAttribute('crossOrigin', 'Anonymous') //url为外域时需要
var imgWidth, imgHeight
newImage.onload = function () {
imgWidth = this.width
imgHeight = this.height
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w
canvas.height = w * imgHeight / imgWidth
} else {
canvas.height = w
canvas.width = w * imgWidth / imgHeight
}
} else {
canvas.width = imgWidth
canvas.height = imgHeight
quality = 0.6
}
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
var ba = canvas.toDataURL('image/jpeg', quality) //压缩语句
// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间,请加以下语句,quality初始值根据情况自定
// while (base64.length / 1024 > 150) {
// quality -= 0.01;
// base64 = canvas.toDataURL("image/jpeg", quality);
// }
// 防止最后一次压缩低于最低尺寸,只要quality递减合理,无需考虑
// while (base64.length / 1024 < 50) {
// quality += 0.001;
// base64 = canvas.toDataURL("image/jpeg", quality);
// }
callback(ba) //必须通过回调函数返回,否则无法及时拿到该值
}
}
上传base64图片并压缩的更多相关文章
- 上传base64图片到七牛云前端遇到的坑
介意前端普通引入七牛云SDk上传图片到七牛云需要多个js,所以才有了base64的上传方式,简化操作,(懒.) 七牛云官方文档如下 https://developer.qiniu.com/kodo/k ...
- 基于vue上传base64图片,通过canvas压缩base64
其实和vue关系不大,和我们之前做上传压缩性质是一样的 当然下面的代码是没有处理ios横屏拍照的bug的 有兴趣的可以多搜一下 网上都有相应的解答 .. var that = this if (e. ...
- 上传base64图片至七牛云,并返回图片link
https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...
- weui上传多图片,前端压缩,base64编码
记录一下在做一个报修功能的心路历程,需求功能很简单,一个表单提交,表单包含简单的文字字段以及图片 因为使用的是weui框架,前面的话去找weui的表单和图片上传组件,说实话,weui的组件写的还不错, ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- 前端上传 base64 编码图片到七牛云存储
参考文档 如何上传base64编码图片到七牛云 调试过程 文档中分别有 java 和 html 的 demo,可以根据文档示例调试. 下面是我调试的过程,可以作为参考,特别注意的是,如果需要给文件起名 ...
- 上传base64格式的图片到服务器
上传base64格式的图片到服务器 /**bash64上传图片 * @param $base64 图片的base64数据 * @param $path 保存路径 */ function base64_ ...
随机推荐
- 路由器安全——破解wifi密码,同时中间人攻击
聊聊安全那些事儿 篇一:Wi-Fi安全浅析 2016-04-25 13:18:16 141点赞 712收藏 63评论 前言 近期,Wi-Fi相关的安全话题充斥着电视新闻的大屏幕,先是曝出了路由器劫持的 ...
- js 变量以及函数传参
一.变量: 基本类型是变量对象重新创建一个新值给变量对象空间,虽然是同一个值但是互不影响. 引用类型是也是将一个值重新赋值给新的变量空间,但是这个值是堆中对象的一个指针,新的变量和旧的变量指向是同一个 ...
- 项目Alpha冲刺——测试
作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 完成项目Alpha冲刺 团队信息 队名:火鸡堂 队员学号 队员姓名 博客地址 ...
- Ubuntu 14.04.2升级openssh7.9
环境:Ubuntu 14.04.2 目的:openssh版本6.6升级为openssh7.9 准备以下3个包 http://www.zlib.net/ https://www.openssl.org/ ...
- spark的scala:wordCount解析
- Linux中在vim/vi模式下对文本的查找和替换
查找: 1.vim filename 进入一般模式下 2.查找和替换方法 /word 向下查找word 的字符串 例如 /chengtingting 向下查找字符chengtingt ...
- qtcreator cannot find catkin packages
adding /opt/ros/kinetic to CMAKE_PREFIX_PATH in Project -> build environment only /opt/ros/kineti ...
- LeetCode 446. Arithmetic Slices II - Subsequence
原题链接在这里:https://leetcode.com/problems/arithmetic-slices-ii-subsequence/ 题目: A sequence of numbers is ...
- Git的基本使用方法(受益匪浅)
git指令介绍,下面有详解指令可以先跳过直接看下面的详解 $ mkdir learngit //创建一个learngit文件夹 $ cd learngit //进入learng ...
- 洛谷 P2341 [HAOI2006]受欢迎的牛 题解
今天学了强连通分量的Tarjan算法,做了这道类似于板子题的题(尽管我调了1.5h).主要的思路是用Tarjan缩点之后,求每个点的入度(实际上是出度,因为我是反着连边的).如果 有且只有一个点的入度 ...