欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
关于我们
小猿圈html5前端开发开发设计之手机端Vue+Vant完成
时间: 2021-01-12 09:59 浏览次数:
模拟题目:小猿圈html5前端开发开发设计开发设计设计方案之手机上端Vue+Vant进行递交变小旋转相片功效 对于学习培训学习培训前端开发开发设计的小伙子子伴,手机上端都不是疏远的吧

原题目:小猿圈html5前端开发开发设计之手机端Vue+Vant完成提交缩小转动照片作用

针对学习培训前端开发的小伙子伴,手机端也不是生疏的吧,今日小猿圈web前端开发老师就讲一下手机端Vue+Vant完成提交缩小转动照片作用的详尽详细介绍,期待针对学习培训web前端开发的同学们有一定的协助。

朝向百度搜索开发设计

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将转成 文件格式

reader.readAsDataURL(file);

// 载入取得成功后的回调函数

reader.end = 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. = function () {

let data = selfpress(img, Orientation);

self.headerImage = data;

self.postImg();

};

}

};

}

},

// 缩小照片

compress(img, Orientation) {

let canvas = document.("canvas");

let ctx = canvas.getContext("2d");

//瓦片canvas

let tCanvas = document.("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);

//假如照片清晰度超过一百万则应用瓦片绘图

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: //必须顺时针方向(向左)九十度转动

this.rotateImg(img, "left", canvas);

break;

case 8: //必须反方向(向右)九十度转动

this.rotateImg(img, "right", canvas);

break;

case 3: //必须180度转动

this.rotateImg(img, "right", canvas); //转2次

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;

}

},

//将变换为文档

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);

}

}

小猿圈web前端开发老师觉得:授之以鱼更授人以渔,要想学精web前端开发最先必须便是摆正自身的学习培训心态,确立学习培训总体目标,那样才可以坚持不懈学习培训。
要想掌握大量有关前端开发层面的小伙子伴web前端开发通过自学②群:738735873,能够关心小猿圈每日的动态性,会不确定期升级互连网程序编写专业知识,期待对你的学习培训有一定的协助。
上海建网站公司引荐回到凡科,查询大量

义务编写:



Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园