首先，来一个效果图来抑制冲击

步骤1:用户选择要上传的图片

输入类型=' file ' accept=' image/* ' type=' file ' ' name=' image file ' on change=' upload()'选择图片后，会触发上传功能。在这个功能中，我们需要获取图片的资源，对其进行压缩，并用画布绘制。如果需要上传到服务器，也可以使用ajax或者其他方法。

第二步：获取图片资源的压缩预览上传

函数upload(){ let file=document . queryselector(' input[type=file]')。文件[0]//获取选定的文件。这里是图片类型let reader=new file reader()reader。readasdataurl(文件)//读取文件并将文件保存为resulr属性中的url。base64格式reader . onload=function(e){//Trigger let result=e.target.result//base64格式图片地址var image=new image()image . src=result//将图像的地址设置为base64地址图像。onload=function(){ var canvas=document . queryselector(' canvas ')；var context=canvas . getcontext(' 2d ')；canvas . width=image . width；//将画布的画布宽度设置为图片宽度canvas . height=image . height；Context.drawimage (image，0，0，image.width，image . height)//在画布上绘制图片。letdataurl=canvas . todaytaul(' image/JPEG '，0.92)//0.92为压缩比，可根据需要设置。设置太小会影响画质。//dataUrl是压缩图片资源，可以上传到服务器。}}}现在我们来比较一下图片是否压缩成功：

原始大小：

将压缩比设置为0.92:

压缩比设置为0.52

乍一看，你是否觉得缩放比例设置为0.92时，图片为什么比原图大很奇怪？事实上，图片经过base64编码后会变得比原始图片大。具体原因请参考base64的编码原理。所以，我们已经成功压缩了图片！

注意：IE9以下不支持canvas大图片尽量不要用base64，会影响响应速度。

摘要

如上所述，边肖推出的JS和Canvas实现了图片的预览、压缩和上传功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！