1200字范文 > vant文件上传Uploader图片压缩

vant文件上传Uploader图片压缩

时间：2023-08-14 05:10:34

为什么要对图片进行压缩？

随着科技的发展，手机像素越来越好，拍摄的图片也越来越清晰。图片越清晰，体积也就越大。当移动端上传大图时就会发生卡顿，请求超时的情况。当图片过大时，图片预览也会非常慢，所以需要在图片上传时对图片进行压缩。vant中文件上传组件Uploader并不支持图片压缩，因为业务场景中有多个地方需要上传图片时对图片进行压缩，所以我基于Uploader封装了一个新的组件。

Uploader组件封装

此组件封装基于vant文件上传Uploader

API

Vant 文件上传Uploader属性请参照 vant官网

模板部分

<template><van-uploader :fileList="$attrs.value" :before-read="beforeReadFn" v-bind="$attrs" v-on="$listeners"/></template>

Javascript部分

export default {name: 'van-small-upload',props: {quality:{type:Number,default:0.1},compressSwitch:{type:Boolean,default:false},threshold:{type:Number,default:500},beforeRead:{type: Function,default:()=>true}},data() {return {}},methods: {// 处理图片imgPreview(file,index) {console.log('处理图片Fn...');let self = this// 看支持不支持FileReaderif (!file || !window.FileReader) return;const size = file.size/1024console.log(`图片大小 ===> ${file.size/1024}k`);console.log('图片压缩：',pressSwitch?'开':'关');console.log('图片压缩阈值：',this.threshold+'k');console.log('图片压缩降帧值：',this.quality);if (/^image/.test(file.type) && size >= this.threshold && pressSwitch) {// 创建一个readerlet reader = new FileReader()// 将图片2将转成 base64 格式reader.readAsDataURL(file)// 读取成功后的回调reader.onloadend = function() {let result = this.resultlet img = new Image()img.src = resultimg.onload = function() {// 压缩let data = press(img,file.name,file.type)console.log(`压缩后 ===>${data.fileData.size/1024}k`);self.$attrs.value[index].content = data.base64Dataself.$attrs.value[index].file = data.fileData}}}},// 压缩图片compress(img, name, type) {let canvas = document.createElement('canvas')let ctx = canvas.getContext('2d')//瓦片canvaslet tCanvas = document.createElement('canvas')let tctx = tCanvas.getContext('2d')// let initSize = img.src.length;let width = img.widthlet height = img.height//如果图片大于四百万像素，计算压缩比并将大小压至400万以下let ratioif ((ratio = (width * height) / 4000000) > 1) {// console.log("大于400万像素");ratio = Math.sqrt(ratio)width /= ratioheight /= ratio} else {ratio = 1}canvas.width = widthcanvas.height = height// 铺底色ctx.fillStyle = '#fff'ctx.fillRect(0, 0, canvas.width, canvas.height)//如果图片像素大于100万则使用瓦片绘制let countif ((count = (width * height) / 1000000) > 1) {// console.log("超过100W像素");count = ~~(Math.sqrt(count) + 1) //计算要分成多少块瓦片//计算每块瓦片的宽和高let nw = ~~(width / count)let nh = ~~(height / count)tCanvas.width = nwtCanvas.height = nhfor (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)}//进行压缩 let ndata = canvas.toDataURL('image/jpeg', this.quality)tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;return {base64Data:ndata,fileData:this.dataURLtoFile(ndata,name,type)}},//将base64转换为文件dataURLtoFile(dataurl,name,type) {name = name ? name : '图片'type = type ? type : 'jpg'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], name, {type: type})},beforeReadFn(file,detail){const {index} = detailthis.imgPreview(file,index)return this.beforeRead(...arguments);}},mounted(){}};