vue图片压缩上传处理进行服务器上传

涉及到的api方法

drawImage() 方法在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

在画布上定位图像：

JavaScript 语法：	context.drawImage(img,x,y);

在画布上定位图像，并规定图像的宽度和高度：

JavaScript 语法：	context.drawImage(img,x,y,width,height);

剪切图像，并在画布上定位被剪切的部分：

JavaScript 语法：	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数值

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度（伸展或缩小图像）。
height	可选。要使用的图像的高度（伸展或缩小图像）。

 

toDataURL(type, encoderOptions)

二、参数

1、type：图片格式，默认为 image/png,可以是其他image/jpeg等

2、encoderOptions：0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值。

三、返回值

返回值是一个数据url，是base64组成的图片的源数据、可以直接赋值给图片的src属性。

 

项目使用：

1.新建utils/imgUpload.js文件

import Router from '@/router/index';
const dataURLtoFile = (dataurl, filename) => { // 将base64转换为file文件
    let arr = dataurl.split(',')
    let mime = arr[0].match(/:(.*?);/)[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, { type: mime })
};

const imgZip = (file) => {
    var _this = this;
    let imgZipStatus = new Promise((resolve, reject) => {
        let canvas = document.createElement("canvas"); // 创建Canvas对象(画布)
        let context = canvas.getContext("2d");
        let img = new Image();
        img.src = file.content; // 指定图片的DataURL(图片的base64编码数据)
        var Orientation = '';
        img.onload = () => {
            let url = window.location.href.split('#')[1];
            console.log(Router.currentRoute.path)
            if(Router.currentRoute.path=="/center/myCenter"){
                canvas.width = 400;
                canvas.height = 300;
                context.drawImage(img, 0, 0, 400, 300);
            }else{
                canvas.width = img.width;
                canvas.height = img.height;
                context.drawImage(img, 0, 0, canvas.width, canvas.height);
            }
            //根据页面路径判断是否压缩质量，自行定义
            if(Router.currentRoute.path=="/forum"){
                file.content = canvas.toDataURL(file.file.type, 0.2); // 0.92为默认压缩质量
            }else{
                file.content = canvas.toDataURL(file.file.type, 0.5); // 0.92为默认压缩质量
            }
            
            let files = dataURLtoFile(file.content, file.file.name);
            resolve(files)
        }
    })
    return imgZipStatus;
};
export {
    imgZip,
}

2.main.js引入

// 引入imgUpload方法
import * as imgUpload from "./utils/imgUpload"
Vue.prototype.$imgUpload = imgUpload;

3.页面 中使用，图片上传，使用的有赞vant-ui，自行查看使用

this.$imgUpload.imgZip(file).then((resData) => {
        const formData = new FormData();
        formData.append("file", resData);
        // 请求接口上传图片到服务器
        uploadImg(formData).then((res) => {
          if (res.code == 200) {
            
            this.$toast("上传成功");
          } else {
            this.$toast(res.msg);
          }
});

最后点个关注，支持一下呗！