当前位置：Gxlcms > html代码 > html5canvas移动浏览器上实现图片压缩上传_html5教程技巧

html5canvas移动浏览器上实现图片压缩上传_html5教程技巧

时间：2021-07-01 10:21:17 帮助过：31人阅读

最近在移动端设计头像上传功能时，原本是以直接通过formData上传，然而实际使用情况是：对于过大的图片（高像素手机所拍摄的照片等）上传时间过长会导致上传失败，而每次都上传原始大小的图片（后台处理压缩）十分影响用户体验，所以研究了一下通过canvas压缩图片并上传的方法，以下是整理的一些思路和心得：

一、获取本地图片，并将图片绘制到画布中。此处的难点在于：由于浏览器的保护机制，无法直接获取到本地文件的图片路径，所以需要将本地图片编译成base64格式再做上传，代码如下：