前端图片压缩的方式-前端压缩并上传图片

获取图片数据 ―> 用canvans画图,压缩 ―> 压缩后为base64 ―> 转成文件格式 ―> 上传文件

移动端工单报修的场景中,上传图片的功能已经屡见不鲜,但现在手机像素普遍较高,随手拍一张图片都6、7M,十几兆的图片也并不罕见。如果这些未处理的图片直接随数据上传向服务器,不但会占用更多的存储空间,而且用户也要等更久的时间,体验性会差很多,同时更长的传输时间,也加大了问题发生的概率,基于这些情况,压缩图片并上传的需求应运而生。

() 该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成(DONE),并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。

canvas 用来转换图片,将原来的图片“另存为”新图片。这里核心方法是cavas的 drawImage 方法来压缩图片。

上传图片至服务器,使用 formData 对象生成表单,这里使用axios提交数据

我们在制作网页时有需要用到图片,制作网页的图片都会用编码来优化,但是会时候特定格式的图片;如jpg格式。

原因是这种图片格式叫小有利用网页的设计,网页内容多了加载速度就变慢,平常我们也会使用图片,压缩图片多数人就将图片在压缩器打开,添加到里面。

这里是使用了迅捷视频压缩软件添加了两张jpg图片,下面设置压缩方式,楼主也可以自定义。

完成图片的添加我们点击文件页面上的“开始压缩”按钮对图片就可以压缩了