溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、前言
三年.net開發轉前端已經四個月了，前端主要用webpack+vue，由于后端轉過來的，前端不夠系統，希望分享下開發心得與園友一起學習。
圖片的上傳之前都是用的插件(ajaxupload)，或者傳統上傳圖片的方式,各有利弊：插件的問題是依賴jq并且會使系統比較臃腫，還有傳統的web開發模式 前后端偶爾在一起及對用戶體驗要求低，現在公司采用webpack+vue+restfullApi開發模式 前后端完全分離，遵從高內聚，低偶爾的原則，開發人員各司其職，一則提升開發效率（從長期來看，短期對于很多開發人員需要有個適應的過程，特別是初中級的前端處理業務邏輯方面的能力比較欠缺），二則提升用戶體驗。今天分享下在項目開發中寫的的圖片上傳 vue組件。
二、處理問題
這里用h6做圖片上傳考慮到瀏覽器支持的問題，這里考慮的場景是在做webapp的時候
1.移動web圖片上傳還包括拍攝上傳，但是在移動端會出現拍攝的照片會旋轉，處理這個問題需要得到圖片旋轉的情況，可以用exif.js來獲取，具體可以參看文檔
2.圖片壓縮
3.旋轉
三、代碼
1組件代碼
<template>
<div>
<input type="file" 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>
以上所述是小編給大家介紹的vuejs開發組件分享之H5圖片上傳、壓縮及拍照旋轉的問題處理，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
