LocalResizeIMG:移动端图片上传优化方案
当我们在移动端开发中需要实现图片上传时,通常会遇到以下问题:
- 移动设备拍摄的图片体积较大,上传速度慢。
- 图片上传过程中无法提供压缩和裁剪等服务,导致服务器存储空间浪费。
为了解决这些问题,我们可以使用LocalResizeIMG库,它可以将图片进行本地压缩,并通过AJAX无刷新上传。这篇文章将介绍如何使用LocalResizeIMG来优化移动端图片上传。
安装LocalResizeIMG
首先,我们需要从Github上下载并引入LocalResizeIMG库。
------- --------------------------------- ------- -----------------------------------------
使用LocalResizeIMG
LocalResizeIMG的使用分为两步:
- 将图片进行本地压缩。
------------------- - ------ ---- -------- ---- -------- -------- -------- - -- ------------- -- ------ -------- -- - -- --------- - ---
img
是一个DOM元素,用于表示需要进行压缩的图片。width
是压缩后的图片宽度,单位是像素。quality
是压缩后的图片质量,取值范围为0到1之间。success
回调函数会在压缩成功后执行。result
参数是一个对象,表示压缩后的图片数据。error
回调函数会在出现错误时执行。
- 通过AJAX无刷新上传本地压缩后的图片。
-------- ----- ------- ---- --------------------- ----- - ----- -------------- -- ---------------- -- --------- ------- -------- -------- ------ - -- ------------- -- ------ -------- -- - -- ------------- - ---
type
表示请求类型,这里使用POST请求。url
表示上传地址。data
是一个包含需要上传数据的对象,file
参数中存储的是压缩后的图片base64字符串。dataType
表示返回的数据类型,这里使用JSON格式。success
回调函数会在上传成功后执行。error
回调函数会在上传失败后执行。
示例代码
下面是一个完整的图片上传示例代码:
--------- ----- ------ ------ ----- ---------------- --------------------- ------------ ------- ---------------------------------------------------------------------------- ------- --------------------------------------- ------- --- - ---------- ----- - -------- ------- ------ ------ ----------- ---------------- ------- --------------------------- ---- ------------------- -------- ---------- -- - --- --- - ------------------------------ --- --------- - -------------------------------------- --- --------- - -------------------------------------- --- ------- - ----------------------------------- ------------------------------------ -------- -- - --- ---- - ------------------- -- ------- ------- --- ------ - --- ------------- ------------- - -------- --- - ------- - ---------------- ------------------------- -- --------------------------- --- ----------------------------------- -------- -- - ------------------- - ------ ---- -------- ---- -------- -------- -------- - -------------------- -------- ----- ------- ---- --------------------- ----- - ----- ---------------------------------------------------------- ---------- -------------------------------------------------------------------------------------