一、前言

  三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习。

  图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期对于很多开发人员需要有个适应的过程,特别是初中级的前端处理业务逻辑方面的能力比较欠缺),二则提升用户体验。今天分享下在项目开发中写的的图片上传 vue组件。

二、处理问题

  这里用h5做图片上传考虑到浏览器支持的问题,这里考虑的场景是在做webapp的时候

  1.移动web图片上传还包括拍摄上传,但是在移动端会出现拍摄的照片会旋转,处理这个问题需要得到图片旋转的情况,可以用exif.js来获取,具体可以参看文档

  2.图片压缩

  3.旋转

三、代码

1组件代码

<template>
<div>
<input type="file" style="display: none;" id="img-upload" multiple accept="image/*" @change="uploadImg($event)"/>
</div>
</template>
<script>
import EXIF from '../../../Resource/Global/Js/exif'
export default{
name:"image-html5-upload",
props:{
imgArr:{
type:Array,
twoWay: true,
default:Array
},
imgNumLimit:{//一次最多可以上传多少张照片
type:Number,
default:4
}
},
methods:{
"uploadImg": function(e){
let tag = e.target;
let fileList = tag.files;
let imgNum = fileList.length;
let _this = this;
_this.imgArr = [];//图片数据清零
if(this.imgArr.length + imgNum > this.imgNumLimit){
alert('一次最多上传'+this.imgNumLimit+'张图片!');
return;
}
var Orientation;
for(let i=0;i<imgNum;i++){
EXIF.getData(fileList[i], function(){
Orientation = EXIF.getTag(fileList[i], 'Orientation');
});
let reader = new FileReader();
reader.readAsDataURL(fileList[i]);
reader.onload = function(){
var oReader = new FileReader();
oReader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = function() {
var expectWidth = this.naturalWidth;
var expectHeight = this.naturalHeight;
if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
expectWidth = 800;
expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
} else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
expectHeight = 1200;
expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
}
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = expectWidth;
canvas.height = expectHeight;
ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
var base64 = null;
//修复ios上传图片的时候 被旋转的问题
if(Orientation != "" && Orientation != 1){
switch(Orientation){
case 6://需要顺时针(向左)90度旋转
_this.rotateImg(this,'left',canvas);
break;
case 8://需要逆时针(向右)90度旋转
_this.rotateImg(this,'right',canvas);
break;
case 3://需要180度旋转
_this.rotateImg(this,'right',canvas);//转两次
_this.rotateImg(this,'right',canvas);
break;
}
}
base64 = canvas.toDataURL("image/jpeg", 0.8);
if(fileList[i].size / 1024000 > 1){
_this.imgScale(base64, 4)
}else{
_this.imgArr.push({"src": base64});
}
console.log(JSON.stringify(_this.imgArr));
};
};
oReader.readAsDataURL(fileList[i]);
}
}
},
"imgScale": function(imgUrl,quality){
let img = new Image();
let _this = this;
let canvas = document.createElement('canvas');
let cxt = canvas.getContext('2d');
img.src = imgUrl;
img.onload = function(){
//缩放后图片的宽高
let width = img.naturalWidth/quality;
let height = img.naturalHeight/quality;
canvas.width = width;
canvas.height = height;
cxt.drawImage(this, 0, 0, width, height);
_this.imgArr.push({"src": canvas.toDataURL('image/jpeg')});
}
},
"rotateImg":function (img, direction,canvas) {//图片旋转
var min_step = 0;
var max_step = 3;
if (img == null)return;
var height = img.height;
var width = img.width;
var 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);
}
var degree = step * 90 * Math.PI / 180;
var 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;
}
}
}
}
</script>

2.使用方法

<template>
<div>
<div class="album-img-list">
<ul>
<li v-for="img in imgList"><div class="album-bg-img"><img :src='img.src'> </div></li> </ul>
</div>
<div class="album">
<label for="img-upload">上传照片</label>
<image-html5-upload :img-arr.sync="imgList"></image-html5-upload>
</div>
</div>
</template>

本文版权归作者(谢俊)和博客园所有,欢迎转载,转载请标明出处。

原文地址:http://www.cnblogs.com/net-xiejun/

微信开发群

完整源码下载:https://github.com/xiejun-net/weixin

公众账号:

vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理的更多相关文章

  1. 分享一个react 图片上传组件 支持OSS 七牛云

    react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v ...

  2. H5 图片上传

    1.h5 图片异步上传 (1) 异步上传input触发onchange事件的时候,就把图片上传至服务器.后台可能会返回图片的链接等信息,前台可以把图片信息展示给用户看. (2) 另一种情况可能需要前台 ...

  3. 浅析H5图片上传

    概述 最近需求上需要实现图片上传的功能,简单记录下实现过程.目前实现的功能比较简单,主要有以下几点: 图片预览 图片删除 拖拽上传 压缩上传 移动端实现方案:使用File API 主要使用到 File ...

  4. h5图片上传预览与拖拽上传

    图片上传: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  5. vue移动端图片上传压缩

    上传压缩方法 import {api} from '../../api/api.js'; import axios from 'axios'; export function imgPreview ( ...

  6. HTML5 开发APP(打开相册以及图片上传)

    我们开发app,常常会遇到让用户上传文件的功能.比如让用户上传头像.我公司的业务要求是让用户上传支付宝收款二维码,来实现用户提现的功能.想要调用相册要靠HTML Plus来实现.先上效果图 基本功能是 ...

  7. H5图片上传插件

    基于zepto,支持多文件上传,进度和图片预览,用于手机端. (function ($) { $.extend($, { fileUpload: function (options) { var pa ...

  8. h5图片上传预览

    项目中常用到文件上传预览功能,整理一下:如果不想使用 type="file" 的默认样式,可以让其覆盖在一个按钮样式上边,设其透明度为0,或者使用Label关联 html < ...

  9. h5图片上传简易版(FileReader+FormData+ajax)

    一.选择图片(input的file类型) <input type="file" id="inputImg"> 1. input的file类型会渲染为 ...

随机推荐

  1. 关于iOS 10不能跳转设置的解决办法

    NSURL*url=[NSURL URLWithString:@"Prefs:root=WIFI"];  Class LSApplicationWorkspace = NSClas ...

  2. Java 网络编程学习总结

    新手一枚,Java学习中,把自己学习网络编程的知识总结一下,梳理下知识,方便日后查阅,高手莫进. 本文的主要内容: [1]    网络编程认识                [2]  TCP/IP编程 ...

  3. R语言解读一元线性回归模型

    转载自:http://blog.fens.me/r-linear-regression/ 前言 在我们的日常生活中,存在大量的具有相关性的事件,比如大气压和海拔高度,海拔越高大气压强越小:人的身高和体 ...

  4. [OC] Podfile 格式内容

    platform :ios, '8.0' target :'targetName' do pod 'Masonry', '~> 1.0.1' pod 'SDCycleScrollView', ' ...

  5. requirejs加载css样式表

    1. 在 https://github.com/guybedford/require-css 下载到require-css包 2. 把css.js或者css.min.js复制到项目的js目录下 3. ...

  6. linux服务器下安装nodejs

    http://www.cnblogs.com/kevinchou/p/5405540.html

  7. Best 3D Modeling software under Ubuntu

    Blender Blender is the best free and open source 3D modelling program out there by a long shot! The ...

  8. Win7快速启动栏

    http://jingyan.baidu.com/article/456c463bbc1d140a583144cf.html 1. 在任务栏上右键 -> 工具栏 -> 新建工具栏.   在 ...

  9. /proc 【虚拟文件系统】

    在安装新硬件到 Linux 系统之前,你会想要知道当前系统的资源配置状况. Linux 将这类信息全集中在 /proc 文件系统下./proc 目录下的文件都是 Linux 内核虚拟出来的,当你读取它 ...

  10. Hangfire项目使用

    基本介绍: hangfire 主要用于根据设置时间来执行任务,间隔几分钟执行一次,每天几点钟执行一次,如此执行任务. 方法: backgroundjob.enqueue(()=>"要执 ...