React图片压缩上传统一处理

一、简介

最近项目需要对上传的图片文件进行压缩后才上传到服务器中，于是研究了一番，下面给出详细的压缩方法，笔者使用的是React Ant Design前端框架的Upload组件上传图片：

通过查看Ant Design官网文档，在上传文件前可以修改文件：

二、压缩相关代码

图片压缩的原理：实际上根据图片大小有没有超过预定的最大最小时，如果超过指定的高度/宽度，在不怎么失真的前提下裁剪图片，然后使用canvas画布的drawImage()方法绘制图片。下面是关键的代码：

//在上传之前转换文件transformFile = (file) => {/*** 针对图片进行压缩,如果图片大小超过压缩阈值,则执行压缩,否则不压缩*///判断是否是图片类型if (this.checkIsImage(file.name)) {const {compressThreshold = 5, isPictureCompress = false, pictureQuality = 0.92} = this.props;let fileSize = file.size / 1024 / 1024;// console.log('before compress, the file size is : ', fileSize + "M");//当开启图片压缩且图片大小大于等于压缩阈值,进行压缩if ((fileSize >= compressThreshold) && isPictureCompress) {//判断浏览器内核是否支持base64图片压缩if (typeof (FileReader) === 'undefined') {return file;} else {try {this.setState({spinLoading: true});return new Promise(resolve => {//声明FileReader文件读取对象const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {// 生成canvas画布const canvas = document.createElement('canvas');// 生成imgconst img = document.createElement('img');img.src = reader.result;img.onload = () => {const ctx = canvas.getContext('2d');//原始图片宽度、高度let originImageWidth = img.width, originImageHeight = img.height;//默认最大尺度的尺寸限制在（1920 * 1080）let maxWidth = 1920, maxHeight = 1080, ratio = maxWidth / maxHeight;//目标尺寸let targetWidth = originImageWidth, targetHeight = originImageHeight;//当图片的宽度或者高度大于指定的最大宽度或者最大高度时,进行缩放图片if (originImageWidth > maxWidth || originImageHeight > maxHeight) {//超过最大宽高比例if ((originImageWidth / originImageHeight) > ratio) {//宽度取最大宽度值maxWidth,缩放高度targetWidth = maxWidth;targetHeight = Math.round(maxWidth * (originImageHeight / originImageWidth));} else {//高度取最大高度值maxHeight,缩放宽度targetHeight = maxHeight;targetWidth = Math.round(maxHeight * (originImageWidth / originImageHeight));}}// canvas对图片进行缩放canvas.width = targetWidth;canvas.height = targetHeight;// 清除画布ctx.clearRect(0, 0, targetWidth, targetHeight);// 绘制图片ctx.drawImage(img, 0, 0, targetWidth, targetHeight);// quality值越小,图像越模糊,默认图片质量为0.92const imageDataURL = canvas.toDataURL(file.type || 'image/jpeg', pictureQuality);// 去掉URL的头,并转换为byteconst imageBytes = window.atob(imageDataURL.split(',')[1]);// 处理异常,将ascii码小于0的转换为大于0const arrayBuffer = new ArrayBuffer(imageBytes.length);const uint8Array = new Uint8Array(arrayBuffer);for (let i = 0; i < imageBytes.length; i++) {uint8Array[i] = imageBytes.charCodeAt(i);}let mimeType = imageDataURL.split(',')[0].match(/:(.*?);/)[1];let newFile = new File([uint8Array], file.name, {type: mimeType || 'image/jpeg'});// console.log('after compress, the file size is : ', (newFile.size / 1024 / 1024) + "M");resolve(newFile);};};reader.onerror = () => {this.setState({spinLoading: false});return file;}}).then(res => {this.setState({spinLoading: false});return res;}).catch(() => {this.setState({spinLoading: false});return file;});} catch (e) {this.setState({spinLoading: false});//压缩出错,直接返回原file对象return file;}}} else {//不需要压缩，直接返回原file对象return file;}} else {//非图片文件,不进行压缩,直接返回原file对象return file;}};

三、使用方法

<NHUploaduploadType={'file'}multiple={true}fileCountLimit={fjsl}maxFileSize={20}fileTypeLimit={fileTypeList}onChange={this.fjOnChange}isPictureCompress={true} //是否开启图片压缩pictureQuality={0.5}   //图片质量compressThreshold={1}  //压缩阈值
/>

在使用时，我们可以根据业务需求动态设置需要压缩的阈值，图片质量等等，对图片压缩可以大大节省服务器的资源，现在手机随便拍一张照片就是10几兆。

React图片压缩上传统一处理相关推荐

[html] 如何使用html5进行图片压缩上传？
[html] 如何使用html5进行图片压缩上传? 1.获取到图片的base64格式: 2.图片加载完成后,把图片转化为canvas: 3.使用canvas的toDataURL按照自己的需要进行压缩: ...
js 图片压缩上传（base64位）以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
前端图片压缩上传(纯js的质量压缩，非长宽压缩)
前端图片压缩上传(纯js的质量压缩,非长宽压缩) 此demo为大于1M对图片进行压缩上传若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> ...
JS 图片压缩上传并在iOS中矫正方向
JS 图片压缩上传并在iOS中矫正方向最近在项目中,用到图片上传.如果不进行压缩再上传的话,动辄34兆的图片,上传起来会相当漫长.还有一点就是,在iOS中所拍摄的图片在本地显示是没有问题的,但是上传 ...
web 前端图片优化之--图片压缩上传
移动前端-图片压缩上传实践此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能,最近有了点空闲时间,所以就实践了一下.demo效果链接在文章底部贴出. 在做移动端图片上传的时候,用户传 ...
基于Plupload的图片压缩上传
前言这里的上传工具基于JQuery.Plupload 传送门:Plupload官方.中文文档为什么要做图片压缩? 现在手机拍照都快10M了,但是有时候图片上传只要看得清楚就可以了,比如上传身份证2 ...
JS前端图片压缩上传
JS前端图片压缩上传重点知识最近在做一个手机端的图片上传,写了一个比较符合自己要求的方法,可供参考在做这个功能模块时,我遇到了以下问题,都花费了大量时间: 1. 不知道怎么压缩图片,(代码和方法) ...
写给大忙人看的 - Java中图片压缩上传至MinIO服务器（4）
之前文章已经介绍了 MinIO 的环境搭建,已经对文件的上传下载方法,本篇文章一起与大家来学习图片压缩上传的方法 1.背景最近客户总抱怨 APP 中图片显示较慢, 升级服务器带宽又没有多的预算.查看 ...
前端图片压缩上传（压缩篇）
为什么说这是一篇比较适合小白的前端图片压缩文章呢?因为我也是一个刚工作半年的前端小白,最近接到了一个前端图片压缩上传的任务,通过各种百度博客完成了这项任务,但是任务完成后对各种技术细节却还不是特别理解 ...
移动端实现图片压缩上传
移动端实现图片压缩上传目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现.根据查看caniuse,本demo里使用到的FileReader.Blob.Formdata对象均 ...

React图片压缩上传统一处理

一、简介

二、压缩相关代码

三、使用方法

React图片压缩上传统一处理相关推荐

最新文章

热门文章