Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言
最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片canvas自定义指令
Vue.directive("canvas", {
bind: function (el, binding) {
// 压缩图片需要的一些元素和对象
var reader = new FileReader(), img = new Image();
// 选择的文件对象
var file = null;
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// base64地址图片加载完毕后
img.onload = function () {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
//比例压缩
var rate = 0.4;
var targetWidth = originWidth * rate, targetHeight = originHeight * rate;
// canvas对图片进行缩放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight);
// canvas转为blob并上传
$.ajax({
url: 'user/upload/base64',
type: 'post',
data: {
file: canvas.toDataURL("image/jpeg", 0.7)
},
success: binding.value,
error: function (e) {
alert(e.status);
}
})
};
// 文件base64化,以便获知图片原始尺寸
reader.onload = function(e) {
img.src = e.target.result;
};
el.addEventListener('change', function (event) {
file = event.target.files[0];
// 选择的文件是图片
if (file.type.indexOf("image") == 0) {
reader.readAsDataURL(file);
}
});
}
});
- HTML
<div id="_upload">
<i v-on:click="upload">自定义上传文件样式</i>
<input id="_file" v-canvas="success" style="display: none;"/>
</div>
- JS
var uploadVue = new Vue({
el: '#_upload',
methods: {
upload: function () {
$("#_file").click();
},
success: function (data) {
//处理上传图片成功Ajax回调
}
}
});
结束
demo同时依赖Vue和Jquery, 同时要求后台可以处理base64的文件流,如果有问题欢迎评论,会及时回复。
Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式的更多相关文章
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...
- H5图片压缩上传
1.所用到技术 HTML5 API:filereader.canvas 以及 formdata 目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现.本次使用到的FileRea ...
- Vue.directive 自定义指令
一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- 基于vue + axios + lrz.js 微信端图片压缩上传
业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
- 基于H5+ API手机相册图片压缩上传
// 母函数 function App(){} /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照 ...
- Html5+asp.net mvc 图片压缩上传
在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...
- 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
- js 图片压缩上传(base64位)以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
随机推荐
- 【Leetcode】【Medium】Rotate List
Given a list, rotate the list to the right by k places, where k is non-negative. For example:Given 1 ...
- Struts2学习-自动
和ssh框架的基本一致. <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...
- Spark Executor内幕彻底解密:Executor工作原理图、ExecutorBackend注册源码解密、Executor实例化内幕、Executor具体工作内幕
本课主题 Spark Executor 工作原理图 ExecutorBackend 注册源码鉴赏和 Executor 实例化内幕 Executor 具体是如何工作的 Spark Executor 工作 ...
- 使用Jmeter进行接口测试和压力测试的配置和使用
1. Jmeter简介 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. JMeter 可 ...
- SAP人工智能服务Recast.AI的一个简单例子
关于这个例子的完整介绍,请参考公众号 "汪子熙"的两篇文章: SAP C/4HANA与人工智能和增强现实(AR)技术结合的又一个创新案例 和使用Recast.AI创建具有人工智能的 ...
- MSSQL注入常用SQL语句整理
很多情况下使用工具对mssql注入并不完善,所以我们就需要手工注入,一下是本人收集的一些mssql的sql语句. 手工MSSQL注入常用SQL语句 and exists (select * from ...
- UVa 10048 - Audiophobia(Floyd变形)
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- im2rec打包图片
https://mxnet.incubator.apache.org/faq/finetune.html python ~/mxnet/tools/im2rec.py --list --recursi ...
- ThinkPHP中前台输出变量
1. foreach <foreach name="list" item="vo" > {$key}|{$vo.id}:{$vo.name} & ...
- 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)
业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...