前端JS图片压缩处理

2020-10 分享

近期工作遇到了用户上传图片由前端压缩图片大小，再传到OSS。这样可以减少用户上行传输的数据量，减少用上传的等待时长，优化用户体验。

方案：利用js现成canvas。

Canvas 对象提供的 toDataURL() 方法，该方法接收 type 和 encoderOptions 两个可选参数。 type 表示图片格式，默认为 image/png。而 encoderOptions 用于表示图片的质量，在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92，其他参数会被忽略。

除了toDataURL() 方法之外，它还提供了一个 toBlob() 方法，和 toDataURL() 方法相比，toBlob() 方法是异步的，因此多了个 callback 参数，这个 callback 回调方法默认的第一个参数就是转换好的 blob文件信息。toBlob(callback, [type], [encoderOptions]) 参数 encoderOptions 用于针对image/jpeg 格式的图片进行输出图片的质量设置。

流程：
1.读取用户上传的 File 对象，转化成 Image 对象，再写入到 Canvas 画布，最后由 Canvas 对象 API 对图片的大小和尺寸输出调整，转换成data URL数据，实现压缩目的。

（图为一张png格式图片转化为base64字符串形式）

由4个部分组成：前缀（data:）、数据类型 (image/png)、非文本可选的标记（ base64 ）、数据本身（后面的一大串）

2.上传到OSS上，OSS需要的是Blob二进制类型的大对象
3.上传成功后把OSS响应回来的url回显，顺便把图片地址给了后端

完毕。

（注：如果对于画质要求过高，原图片像素过大这个方法不使用。需要借助后端服务能力，使用算法）

前端JS图片压缩处理相关推荐

vue中前端实现图片压缩 file文件
项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下.(我已经拿到上传的file文件的前提下) 先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法将图片压缩的方法写到这 ...
JS 图片压缩上传并在iOS中矫正方向
JS 图片压缩上传并在iOS中矫正方向最近在项目中,用到图片上传.如果不进行压缩再上传的话,动辄34兆的图片,上传起来会相当漫长.还有一点就是,在iOS中所拍摄的图片在本地显示是没有问题的,但是上传 ...
微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件
标题微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件图片上传功能作为一个比较常见的功能,有时候需要在微信内置浏览器里打开,但是有些型号的手机会出现打不开的现象,点击 ...
前端js图片跨域问题解决方案
前端js图片跨域问题解决方案错误提示如下: 解决方案: 要在图片存放的根目录放一个.htaccess 并且加上,本方法适用于apache服务器 <IfModule mod_headers.c& ...
js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传
js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传图片上传目录 js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传 html代码 js代码 html代码 <input type ...
前端获取图片压缩后上传给后台
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
js 图片压缩上传（base64位）以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
前端实现图片压缩上传功能
以移动端为例,在H5上传图片时,由于机型 / 网速 / 流量等限制,在低版本机型上经常会出现上传的图片太大导致上传很慢甚至崩溃的情况,所以需要对在某些情况下需要对上传的图片进行压缩上传. 以下以移动端 ...
JS—图片压缩上传（单张）
*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...

前端JS图片压缩处理

前端JS图片压缩处理相关推荐

最新文章

热门文章