// 引入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"
你可以在创建渲染上下文的时候设置多个属性,例如:
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://www.jb51.net/article/248830.htm
到此这篇关于vue js实现图片压缩封装方法的文章就介绍到这了,更多相关vuejs图片压缩内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!