vue移动端图片上传压缩

上传压缩方法

 import {api} from '../../api/api.js';

 import axios from 'axios';

 export function imgPreview (that, file, type) {

     let self = that;

     let Orientation;

     if (!file || !window.FileReader) return;

     if (/^image/.test(file.type)) {

         // 创建一个reader

         let reader = new FileReader();

         // 将图片2将转成 base64 格式

         reader.readAsDataURL(file);

         // 读取成功后的回调

         reader.onloadend = function () {

             let result = this.result;

             let img = new Image();

             img.src = result;

             //判断图片是否大于100K,是就直接上传，反之压缩图片

             if (this.result.length <= (100 * 1024)) {

                 if(type == 'imageFront'){

                     upImgFront(self, this.result);

                 }

             }else {

                 img.onload = function () {

                     let src = compress(img,Orientation);

                     if(type == 'imageFront'){

                         upImgFront(self, src);

                     }

                 }

             }

         }

     }

 }

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

     }

     //进行最小压缩

     let ndata = canvas.toDataURL('image/jpeg', 0.3);

     tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;

     return ndata;

 }

 // 身份证正面

 function upImgFront(that, src) {

     that.isLoadingShow = true;

     that.loadingTit = '图片上传中...';

     axios({

         method: 'post',

         url: api + '/upload/image/base64',

         data: {

             fileBase64: src,

             authType: '1'

         },

         transformRequest: [function (data) {

             let ret = ''

             for (let it in data) {

             ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'

             }

             return ret

         }],

         headers: {

             'Content-Type': 'application/x-www-form-urlencoded'

         }

     })

     .then((res) => {

         that.isLoadingShow = false;

         if(res.data.code == 0){

             that.imageFrontPath = res.data.data.path;

             if(res.data.data.info){

                 if(res.data.data.info.address){

                     that.idCardFrontDialogAddress = res.data.data.info.address;

                 }

                 if(res.data.data.info.name){

                     that.idCardFrontDialogName = res.data.data.info.name;

                 }

                 if(res.data.data.info.number){

                     that.idCardFrontDialogId = res.data.data.info.number;

                 }

             }

             that.idCardFrontDialog = true;

             that.isFrontSuccess = true;

             that.imageFront = src;

         }else{

             setTimeout(() => {

                 that.isDialogShow = true;

             },100);

             that.dialogTit = '图片上传失败';

         }

     })

     .catch((error) => {

         // that.isLoadingShow = false;

         // setTimeout(() => {

         //     that.isDialogShow = true;

         // },100);

         // that.dialogTit = '服务器错误';

         // console.log('错误了'+ error);

     });

 }

html

 <li class="input-img">

     <span class="item"><b>&lowast;</b>身份证正面照</span>

     <span class="item-value">

         <a href="javascript:" class="input-img-btn" v-on:click="addPicFront">+</a>

         <input type="file" @change="onFileFrontChange" style="display: none;" ref="onFileFrontChange" accept="image/*">

         <span class="img-wrapper" v-if="imageFront">

             <img :src="data:imageFront" alt="" >

             <b class="delete" @click="onDelete('imageFront')"></b>

         </span>

         <span class="img-wrapper" v-else>

             <img src="./u111.png" alt="" >

             <i>示例照片</i>

         </span>

     </span>

 </li>

javascript

 addPicFront(e){

     e.preventDefault();

     this.$refs.onFileFrontChange.click();

     return false;

 },

 onFileFrontChange(e) {

     var files = e.target.files || e.dataTransfer.files;

     if (!files.length) return;

     imgPreview(this, files[0], 'imageFront');

     this.$refs.onFileFrontChange.value = '';

     this.idCardFrontDialogName = '';

     this.idCardFrontDialogId = '';

     this.idCardFrontDialogAddress = '';

 },