时间:2021-07-01 10:21:17 帮助过:2人阅读
先来一张效果图,压压惊
第一步:用户选择需要上传的图片
在选定了图片后 upload 函数将被触发,我们需要在这个函数中,获取到图片的资源,将它压缩并利用canvas绘制出来,若需要上传到服务器,也可以利用ajax或者其他方式上传。
第二步:获取图片资源压缩预览上传
现在我们来比较一下图片是否成功压缩:
原图大小:
压缩比设置为0.92:
压缩比设置为0.52
乍一看,你是不是觉得很奇怪,为什么设置了缩放比为0.92,图片居然比原图大?其实图片通过base64编码后都会变的比原图大,具体原因可以查阅base64的编码原理。如此看来,我们已经成功压缩了图片!
注意点:canvas在IE9以下不支持;大图片尽量不要使用base64,影响响应速度。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
JavaScript分步实现一个出生日期的正则表达式
使用Vue开发动态刷新Echarts组件的教程详解
bootstrap中selectpicker下拉框使用方法实例
以上就是JS和Canvas实现图片的预览压缩和上传功能的详细内容,更多请关注Gxl网其它相关文章!