全局main.js引入：
// 引入imgUpload方法 import * as imgUpload from "./utils/imgUpload" //外部使用 Vue.prototype.$imgUpload = imgUpload
新建imgUpload.js：
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 = () => {
//根据情况定义
// canvas.width = 400;
// canvas.height = 300;
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
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,
}
页面中使用：
//上传方法
afterCard(file) {
this.$imgUpload.imgZip(file).then(resData => {
const formData = new FormData();
formData.append("file", resData);
// 请求接口上传图片到服务器
uploadImg(formData).then(res => {
})
})
}
备注：
HTMLCanvasElement.getContext()方法返回canvas的上下文，如果上下文没有定义则返回null.
在同一个canvas上以相同的contextType多次调用此方法只会返回同一个上下文。
var ctx = canvas.getContext(contextType);var ctx = canvas.getContext(contextType, contextAttributes);
上下文类型（contextType）
是一个指示使用何种上下文，可能的值是:
"2d""webgl""webgl2""bitmaprenderer"
上下文属性(contextAttributes)
你可以在创建渲染上下文的时候设置多个属性，例如:
canvas.getContext("webgl",
{ antialias: false,
depth: false });
Canvas 2D API 中的CanvasRenderingContext2D.drawImage()方法提供了多种方式在Canvas上绘制图像。
ctx.drawImage(image, dx, dy); ctx.drawImage(image, dx, dy, dWidth, dHeight); ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
参数：
image
绘制到上下文的元素。允许任何的 canvas 图像源
sx可选
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。
sy可选
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 Y 轴坐标。
sWidth可选
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的sx和sy开始，到image的右下角结束。
sHeight可选
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。
dx
image的左上角在目标canvas上X 轴坐标。
dy
image的左上角在目标canvas上Y 轴坐标。
dWidth可选
image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。
dHeight可选
image在目标canvas上绘制的高度。允许对绘制的image进行缩放。 如果不说明， 在绘制时image高度不会缩放。
示例：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
Vue vant-ui使用van-uploader实现头像图片上传
https://blog.csdn.net/SmartJunTao/article/details/124841247
