vue开发:移动端图片上传
因为最近遇到个移动端上传头像的需求,上传到后台的数据是base64位,其中为了提高用户体验,把比较大的图片用canvas进行压缩之后再进行上传。在移动端调用拍照功能时,会发生图片旋转,为了解决这个问题引入了exif去判断拍照时的信息再去处理图片,这是个很好的插件。关于exif.js可以去他的GitHub上了解,这边直接npm install exif-js --save 安装,然后import一下就可以使用了。以下就是源码,可以直接使用。
- <template>
- <div>
- <div style="padding:20px;">
- <div class="show">
- <div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div>
- </div>
- <div style="margin-top:20px;">
- <input type="file" id="upload" accept="image" @change="upload">
- <label for="upload"></label>
- </div>
- </div>
- </div>
- </template>
- <script>
- import Exif from 'exif-js'
- export default {
- data () {
- return {
- headerImage:'',picValue:''
- }
- },
- mounted () {
- },
- methods: {
- upload (e) {
- let files = e.target.files || e.dataTransfer.files;
- if (!files.length) return;
- this.picValue = files[0];
- this.imgPreview(this.picValue);
- },
- imgPreview (file) {
- let self = this;
- let Orientation;
- //去获取拍照时的信息,解决拍出来的照片旋转问题
- Exif.getData(file, function(){
- Orientation = Exif.getTag(this, 'Orientation');
- });
- // 看支持不支持FileReader
- if (!file || !window.FileReader) return;
- if (/^image/.test(file.type)) {
- // 创建一个reader
- let reader = new FileReader();
- // 将图片2将转成 base64 格式
- reader.readAsDataURL(file);
- // 读取成功后的回调
- reader.onloadend = function () {
- let result = this.result;
- let img = new Image();
- img.src = result;
- //判断图片是否大于100K,是就直接上传,反之压缩图片
- if (this.result.length <= (100 * 1024)) {
- self.headerImage = this.result;
- self.postImg();
- }else {
- img.onload = function () {
- let data = self.compress(img,Orientation);
- self.headerImage = data;
- self.postImg();
- }
- }
- }
- }
- },
- postImg () {
- //这里写接口
- },
- rotateImg (img, direction,canvas) {
- //最小与最大旋转方向,图片旋转4次后回到原方向
- const min_step = 0;
- const max_step = 3;
- if (img == null)return;
- //img的高度和宽度不能在img元素隐藏后获取,否则会出错
- let height = img.height;
- let width = img.width;
- let step = 2;
- if (step == null) {
- step = min_step;
- }
- if (direction == 'right') {
- step++;
- //旋转到原位置,即超过最大值
- step > max_step && (step = min_step);
- } else {
- step--;
- step < min_step && (step = max_step);
- }
- //旋转角度以弧度值为参数
- let degree = step * 90 * Math.PI / 180;
- let ctx = canvas.getContext('2d');
- switch (step) {
- case 0:
- canvas.width = width;
- canvas.height = height;
- ctx.drawImage(img, 0, 0);
- break;
- case 1:
- canvas.width = height;
- canvas.height = width;
- ctx.rotate(degree);
- ctx.drawImage(img, 0, -height);
- break;
- case 2:
- canvas.width = width;
- canvas.height = height;
- ctx.rotate(degree);
- ctx.drawImage(img, -width, -height);
- break;
- case 3:
- canvas.width = height;
- canvas.height = width;
- ctx.rotate(degree);
- ctx.drawImage(img, -width, 0);
- break;
- }
- },
- compress(img,Orientation) {
- let canvas = document.createElement("canvas");
- let ctx = canvas.getContext('2d');
- //瓦片canvas
- let tCanvas = document.createElement("canvas");
- let tctx = tCanvas.getContext("2d");
- let initSize = img.src.length;
- let width = img.width;
- let height = img.height;
- //如果图片大于四百万像素,计算压缩比并将大小压至400万以下
- let ratio;
- if ((ratio = width * height / 4000000) > 1) {
- console.log("大于400万像素")
- ratio = Math.sqrt(ratio);
- width /= ratio;
- height /= ratio;
- } else {
- ratio = 1;
- }
- canvas.width = width;
- canvas.height = height;
- // 铺底色
- ctx.fillStyle = "#fff";
- ctx.fillRect(0, 0, canvas.width, canvas.height);
- //如果图片像素大于100万则使用瓦片绘制
- let count;
- if ((count = width * height / 1000000) > 1) {
- console.log("超过100W像素");
- count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
- // 计算每块瓦片的宽和高
- let nw = ~~(width / count);
- let nh = ~~(height / count);
- tCanvas.width = nw;
- tCanvas.height = nh;
- for (let i = 0; i < count; i++) {
- for (let j = 0; j < count; j++) {
- tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
- ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
- }
- }
- } else {
- ctx.drawImage(img, 0, 0, width, height);
- }
- //修复ios上传图片的时候 被旋转的问题
- if(Orientation != "" && Orientation != 1){
- switch(Orientation){
- case 6://需要顺时针(向左)90度旋转
- this.rotateImg(img,'left',canvas);
- break;
- case 8://需要逆时针(向右)90度旋转
- this.rotateImg(img,'right',canvas);
- break;
- case 3://需要180度旋转
- this.rotateImg(img,'right',canvas);//转两次
- this.rotateImg(img,'right',canvas);
- break;
- }
- }
- //进行最小压缩
- let ndata = canvas.toDataURL('image/jpeg', 0.1);
- console.log('压缩前:' + initSize);
- console.log('压缩后:' + ndata.length);
- console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
- tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
- return ndata;
- },
- }
- }
- </script>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- .show {
- width: 100px;
- height: 100px;
- overflow: hidden;
- position: relative;
- border-radius: 50%;
- border: 1px solid #d5d5d5;
- }
- .picture {
- width: 100%;
- height: 100%;
- overflow: hidden;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
- }
- </style>
vue开发:移动端图片上传相关推荐
- vue移动端图片上传
一.服务端环境准备 本文服务端主要为nodejs,利用multer中间件完成图片上传功能.服务端安装express框架和multer. npm install express --save npm i ...
- 详细阐述Web开发中的图片上传问题
Web开发中,图片上传是一种极其常见的功能.但是呢,每次做上传,都花费了不少时间. 一个"小功能"花费我这么多时间,真心不愉快. So,要得认真分析下原因. 1.在最初学习Java ...
- 移动端图片上传裁切(版权归秒为所有,仅为搬运)
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport&quo ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显 而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
- Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显 在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...
- 移动端图片上传后进行压缩功能
移动端图片上传后进行压缩功能 在进行讲解上传图片压缩之前,我们先来了解下HTML5中的文件上传的基本知识点. 一: FileList对象与file对象. FileList对象表示用户选择的文件列表.在 ...
- php 图片压缩旋转,移动端图片上传旋转、压缩问题的解决方案
本篇文章就给大家带来移动端图片上传旋转.压缩问题的解决方案.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 前言 在手机上通过网页 input 标签拍照上传图片,有一些手机会出现图片 ...
- JavaScript移动端图片上传方法
移动端图片上传方法 实现效果 文件下载 http://files.cnblogs.com/files/sntetwt/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%9B%BE%E7%8 ...
- 使用vue+elementUi+springBoot实现图片上传,图片删除,图片展示
使用vue+elementUi+springBoot实现图片上传,图片删除,图片展示 环境配置 准备环境 使用软件 图片上传 图片删除 图片显示 所有代码均为参考,每个人的方法不一样,效果不一样,该代 ...
最新文章
- java性能调优03
- Celt Codec简单使用方法
- 经典C语言程序100例之七
- “做好大数据测试,我是认真的!”
- Moss 2007 入门(1) - 功能概述【转】
- 深入理解 switch....case 中的case
- 优先队列的优先级设置法
- web项目导出excel表格
- [RK3399][Android7.1] 移植笔记 --- 音频Codec RT5640添加
- P问题、NP问题、NPC问题、NPC-hard问题
- excel2007不显示文件名
- Object.defineProperty是Es5中无法shim的特性 shim是什么?
- 如何优雅的整合定时批量任务(荣耀典藏版)
- bandgap中简并点理解与仿真
- Effie:沉浸写作,创造价值
- java tooltip_案例-Swing使用ToolTip
- NOI2017银色记
- 海南考研二战心得体会
- 女孩上中专学财经类号还是计算机好,女生学财经类专业好吗
- Typora编辑器(蓝奏)