モバイル端末Vue+VANtのUploaderはアップロード、圧縮、回転画像機能を実現します。
百度向けの開発
html
以上は小编が皆さんに绍介したモバイル端末Vue+VANtのUploaderがアップロード、圧縮、回転画像の机能を実现しました。皆さんに役に立つことを望んでいます。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。
html
<van-uploader :after-read="onRead" accept="image/*">
<img src="./icon_input_add.png" />
</van-uploader>
js。
data() {
return {
files: {
name: "",
type: ""
},
headerImage: null,
picValue: null,
upImgUrl,
}
},
//
async onRead(file) {
// console.log(file);
// console.log(file.file);
this.files.name = file.file.name; //
this.files.type = file.file.type; //
this.picValue = file.file; //
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 () {
// console.log(this.result);
let result = this.result;
let img = new Image();
img.src = result;
// 500K, ,
if (this.result.length <= 500 * 1024) {
self.headerImage = this.result;
self.postImg();
} else {
img.onload = function () {
let data = self.compress(img, Orientation);
self.headerImage = data;
self.postImg();
};
}
};
}
},
//
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);
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
},
//
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;
}
},
// base64
dataURLtoFile(dataurl) {
var arr = dataurl.split(","),
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], this.files.name, {
type: this.files.type
});
},
//
async postImg() {
let file = this.dataURLtoFile(this.headerImage);
let formData = new window.FormData();
formData.append("file", file);
toast_loding(this, " ・・・");
try {
let res = await util.ajax.post(this.upImgUrl, formData, {
headers: {
"Content-Type": "multipart/form-data"
}
});
} catch (e) {
console.log(e);
}
}
締め括りをつける以上は小编が皆さんに绍介したモバイル端末Vue+VANtのUploaderがアップロード、圧縮、回転画像の机能を実现しました。皆さんに役に立つことを望んでいます。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。