vuejs 개발 구성 요소 공유 H5 이미지 업로드,압축 및 사진 회전 문제 처리
3 년.net 개발 전단 이 4 개 월 이 되 었 습 니 다.전단 은 주로 웹 팩+vue 를 사용 합 니 다.백 엔 드 가 바 뀌 었 기 때문에 전단 이 시스템 이 부족 합 니 다.개발 소감 을 공유 하고 원 우 와 함께 공부 하 기 를 바 랍 니 다.
사진 을 올 리 기 전에 사용 하 는 플러그 인(ajax pload)이나 전통 적 으로 사진 을 올 리 는 방식 은 각각 장단 점 이 있 습 니 다.플러그 인의 문 제 는 jq 에 의존 하고 시스템 을 비대 하 게 만 드 는 것 입 니 다.그리고 전통 적 인 웹 개발 모델 의 앞 뒤 가 가끔 함께 있 고 사용자 체험 에 대한 요구 가 낮 습 니 다.현재 회 사 는 webpack+vue+restfullApi 개발 모델 의 앞 뒤 가 완전히 분리 되 어 높 은 내부 집적 을 따 르 고 있 습 니 다.낮은 가끔 의 원칙 으로 개발 자 는 각자 의 직무 를 맡 고 하 나 는 개발 효율 을 향상 시킨다(장기 적 으로 볼 때 단기 적 으로 많은 개발 자 에 게 적응 하 는 과정 이 필요 하 다.특히 초 중급 의 전단 처리 업무 논리 적 능력 이 비교적 부족 하 다).다른 하 나 는 사용자 체험 을 향상 시킨다.오늘 프로젝트 개발 에 쓴 그림 을 공유 하여 vue 구성 요 소 를 업로드 합 니 다.
2.문제 처리
여기 h5 로 사진 을 업로드 합 니 다.브 라 우 저 지원 문 제 를 고려 하여 웹 앱 을 할 때 고려 합 니 다.
1.모 바 일 웹 사진 업로드 에는 촬영 업로드 도 포함 되 지만 모 바 일 에서 촬영 한 사진 이 회전 할 수 있 습 니 다.이 문 제 를 처리 할 때 그림 이 회전 해 야 하 는 경우 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>
위 에서 말 한 것 은 편집장 이 소개 한 vuejs 개발 구성 요소 공유 의 H5 사진 업로드,압축 및 사진 회전 문제 처리 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.