Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
来源:互联网 发布:多线程cpu优化 编辑:程序博客网 时间:2024/05/21 03:18
前言
最近优化项目-手机拍照图片太大,回显速度比较慢,使用了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的文件流,如果有问题欢迎评论,会及时回复。
阅读全文
0 0
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
- H5 canvas实现客户端压缩图片上传
- Vue.directive 自定义指令
- Vue自定义指令(directive)
- Vue.directive 自定义指令
- 微信手机网页上传图片高效率压缩(Canvas+Base64)
- ci框架经canvas压缩图片后经base64上传
- h5移动开发Ajax上传多张Base64格式图片
- H5+ 图片压缩上传
- H5 图片压缩上传
- html5+canvas实现图片的压缩上传
- 使用canvas实现图片压缩上传
- Vue——自定义指令directive
- js h5 上传图片 转成base64 进行图片压缩 不失真
- H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。
- vue学习笔记6 Vue.directive自定义指令
- Vue2 自定义全局指令Vue.directive和指令的生命周期
- H5图片压缩与上传
- workspace\.metadata\.plugins\org.eclipse.wst.server.core
- ACdream 1064 完美数【数位DP】
- iptables备份和恢复、firewalld的9个zone和操作
- codevs1011数的计算
- jerseycom.sun.jersey.api.client.UniformInterfaceException
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
- [BZOJ]2179 FFT快速傅立叶 FFT模板
- python matplotlib模块
- CSS样式技巧之居中
- 欢迎使用CSDN-markdown编辑器
- LUOGU P1036 选数
- BZOJ1040 [ZJOI2008]骑士 环套树/dp
- FZU 1627 Revival's road【DP(矩阵快速幂)】
- 数据结构读书笔记(一)——表、栈和队列