JS和帆布如何实现图片的预览压缩和上传功能 - 行业资讯

　　介绍

这篇文章将为大家详细讲解有关JS和帆布如何实现图片的预览压缩和上传功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

先来一张效果图,压压惊

第一步:用户选择需要上传的图片

& lt; input 类型=癴ile",接受=巴枷?*“,类型=癴ile"“, name=癷mageFile", onchange=吧洗?)“在

在选定了图片后上传函数将被触发,我们需要在这个函数中,获取到图片的资源,将它压缩并利用帆布绘制出来,若需要上传到服务器,也可以利用ajax或者其他方式上传。

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

function 上传(),{, 　　let 才能;file =, document.querySelector(& # 39;输入[类型=文件]& # 39;).files[0],//,获取选择的文件,这里是图片类型, 　　let 才能;reader =, new FileReader (), 　　,,,reader.readAsDataURL(文件),//读取文件并将文件以URL的形式保存在resulr属性中,base64格式, 　　,,,reader.onload =,函数(e),{,//文件读取完成时触发,, 　　,,,,,let result =, e.target.result //, base64格式图片地址,, 　　,,,,,var image =, new 图像(),image.src =, result //,设置的形象地址为base64的地址,, 　　,,,,,image.onload =,函数(){,, 　　,,,,,,,var canvas =, document.querySelector (“# canvas");,, 　　,,,,,,,var context =, canvas.getContext (“2 d");,, 　　,,,,,,,canvas.width =, image.width;,//,设置画布的画布宽度为图片宽度,, 　　,,,,,,,canvas.height =, image.height;,, 　　,,,,,,,context.drawImage(图像,,0,0,,image.width,, image.height),//,在画布上绘制图片,, 　　,,,,,,,let dataUrl =, canvas.toDataURL(& # 39;图像/jpeg # 39;,, 0.92),//, 0.92为压缩比,可根据需要设置,设置过小会影响图片质量,, 　　,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,//,dataUrl 为压缩后的图片资源,可将其上传到服务器,, 　　,,,,,},, 　　,,,}, 　　以前,}

现在我们来比较一下图片是否成功压缩:

原图大小:,

JS和帆布如何实现图片的预览压缩和上传功能”>,, 压缩比设置为0.92: <img src=