vue 图片压缩,vue上传图片压缩
本文主要介绍vue.js实现图像压缩封装的方法，包括全局main.js的介绍方法。通过介绍imgupload方法结合示例代码非常详细的介绍给你。有需要的朋友可以参考一下。
全局main.js引入：
//引入imgUpload方法
从导入*作为imgUpload。/utils/imgUpload
//外用
vue . prototype . $ imgUpload=imgUpload
新建imgUpload.js：
constdataultofile=(dataurl，filename)={//将base64转换为文件
let arr=dataurl.split(，)
设mime=arr[0]。匹配(/:(。*?);/)[1]
设bstr=atob(arr[1])
设n=bstr.length
设u8arr=新Uint8Array(n)
while (n - ) {
u8arr[n]=bstr.charCodeAt(n)
}
返回新文件([u8arr]，文件名，{ type: mime })
};
const imgZip=(file)={
var _ this=this
let imgZipStatus=new Promise((resolve，reject)={
let canvas=document . createelement( canvas )；//创建一个画布对象(Canvas)
let context=canvas . get context( 2d )；
设img=new Image()；
img . src=file . content；//指定图片的DataURL(图片的base64编码数据)
变量方向=“”；
img.onload=()={
//根据情况定义
//canvas . width=400；
//canvas . height=300；
画布.宽度=img .宽度；
canvas . height=img . height；
context.drawImage(img，0，0，canvas.width，canvas . height)；
file . content=canvas . toda taurl(file . file . type，0.5)；//0.92是默认的压缩质量
let files=dataURLtoFile(file . content，file . file . name)；
解析(文件)
}
})
返回imgZipStatus
};
导出{
imgZip，
}
在页面中使用：
//上传方法
卡片后(文件){
这个。$imgUpload.imgZip(文件)。然后(resData={
const formData=new formData()；
formData.append(file ，resData)；
//请求接口上传图片到服务器
uploadImg(formData)。然后(res={
})
})
}
备注：
HTMLCanvasElement.getContext()方法返回画布的上下文，如果上下文未定义，则返回null。
在同一个画布上用相同的contextType多次调用此方法只会返回相同的上下文。
var CTX=canvas . get context(context type)；var CTX=canvas . get context(context type，context attributes)；
上下文类型（contextType）
是使用什么上下文的指示，可能的值为：
2d web GL web gl2 bitmap renderer
上下文属性(contextAttributes)
创建渲染上下文时，可以设定多个属性，例如：
canvas.getContext(webgl ，
{抗锯齿：假，
深度：false })；
画布2D API中的canvasrenderingcontext 2d . draw image()方法提供了许多在画布上绘制图像的方法。
ctx.drawImage(image，dx，dy)；
ctx.drawImage(image，dx，dy，dWidth，d height)；
ctx.drawImage(image，sx，sy，sWidth，sHeight，dx，dy，dWidth，d height)；
参数：
图像
将元素绘制到上下文中。任何允许的画布图像源
Sx可选
需要绘制到目标上下文中的图像的矩形(剪辑)选择框左上角的x轴坐标。
Sy可选
需要绘制到目标上下文中的图像的矩形(剪辑)选择框左上角的y轴坐标。
可选开关
需要绘制到目标上下文中的图像的矩形(裁剪)选择框的宽度。如果没有说明，整个矩形(裁剪)从坐标的sx和sy开始，到图像的右下角结束。
可选高度
需要绘制到目标上下文中的图像的矩形(剪辑)选择框的高度。
高级的（deluxe的简写）
目标画布上图像左上角的x轴坐标。
镝
目标画布上图像左上角的y轴坐标。
可选宽度
图像在目标画布上绘制的宽度。允许缩放绘制的图像。如果没有说明，画图时不会缩放图像宽度。
DHeight可选
图像在目标画布上绘制的高度。允许缩放绘制的图像。如果没有说明，那么画图时不会缩放图像高度。
示例：
var canvas=document . getelementbyid( canvas )；
var CTX=canvas . get context( 2d )；
var image=document . getelementbyid( source )；
ctx.drawImage(image，33，71，104，124，21，20，87，104)；
Ewant-ui使用van-uploader上传头像图片。
https://www.jb51.net/article/248830.htm
关于vue js的图片压缩和打包方法的这篇文章到此为止。更多相关vuejs图像压缩内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。