使用canvas怎么对图片压缩上传

使用canvas怎么对图片压缩上传？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

首先得有一个上传按钮。

<inputtype="file"id="fileys"class="fileys"@change="uploadFile($event)"accept="image/*"/>
<!--uploadFile用change是因为。用户可能会重复选其他图片-->

入正题:

uploadFile:function(event){
letfile=event.target.files[0];//获取input的图片file值
letparam=newFormData();//创建form对象
if(param.getAll('file')[0]=="undefined"){
returnfalse//判断是不是空
}

letreader=newFileReader()
reader.readAsDataURL(file)//读取文件并将文件以URL的形式保存在resulr属性中base64格式，，，网上文档好像规定了格式。。我就选了一个base64


reader.onload=function(e){//文件读取完成时触发
letresult=e.target.result//base64格式图片地址
varimage=newImage()
image.src=result//设置image的地址为base64的地址
image.onload=function(){
varcanvas=document.getElementById("canvas");
varcontext=canvas.getContext("2d");
canvas.width=image.width;//设置canvas的画布宽度为图片宽度
canvas.height=image.height;
context.drawImage(image,0,0,image.width,image.height)//在canvas上绘制图片
letdataUrl=canvas.toDataURL('image/jpeg',0.001)//设置压缩比，可根据需要设置，设置过小会影响图片质量,dataUrl为压缩后的图片资源，可将其上传到服务器
lettupian=_this.dataURLtoFile(dataUrl,file.name)
param.append('file',tupian);//对应后台接收图片名

//然后这里就可以写axios方法。去将这个param上传到后台

}
}

}

看完上述内容，你们掌握使用canvas怎么对图片压缩上传的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注恰卡编程网行业资讯频道，感谢各位的阅读！