前端实现图片压缩上传我觉得还是很有必要的, 现在移动web页面越来越多, 活动页很多都牵涉到图片上传难问题, 而用户手机像素又很高, 随随便便一张图片就是5~10M, 要是一次要上传多张图片的话, 第一个时间花费太多, 第二个就是用户的流量也要耗费不少, 而如果实现前端图片压缩则能很好的避开这两个问题. 我的基本思路是用户通过
input[file]输入框添加了文件后, 读取图片信息, 将图片画到Canvas画布上, 然后再转成图片来实现压缩上传.
核心API
canvas.getContext('2d').drawImage(img, dx, dy, dWidth, dHeight)
- img 图片对象
- dx 将图片画到
canvas上时图片左上角在画布上的x坐标 - dy 将图片画到
canvas上时图片左上角在画布上的y坐标 - dWidth 将图片画到
canvas上时图片要画的宽度 - dHeight 将图片画到
canvas上时图片要画的高度
实现流程
- 用户点击
input[file]选择图片后的逻辑
复制代码
如此, 就实现了图片的压缩上传功能, 其实还是很简单的, 这么没有做实时预览功能, 不过已经写到这一步了(FileReader), 实现预览功能也非常容易, 这就是今天内容的全部了, 图片上传使用得越来越频繁, 做个记录, 省得每次做的时候都要去翻资料.