序言
最近接到一个需求，要求前端把图片压缩在传给后端，并且要将图片转换为jpg格式的。经过百度查询了很多方法，都不是很理想。最后还是通过组件来实现了。
首先是原生的方法 （不推荐）
这个方法对于仅仅有jpg图片的项目很是好用，而且十分方便，原理就是通过传进来的图片的file流文件，用canvas来绘制出来，返回出来的b64格式的文件，在把其本身处理为file流。在发送给后端就好了。
/**
* @desc：前端实现图片压缩
* @desc：只对jpg图片生效-对PNG图片效果甚微
*/
function dataURLtoFile( urlData, fileName ) {
let arr = urlData.split( ',' );
let mime = arr[ 0 ].match( /:(.*?);/ )[ 1 ];
let bytes = atob( arr[ 1 ] ); // 解码base64
let n = bytes.length
let ia = new Uint8Array( n );
while ( n-- ) {
ia[ n ] = bytes.charCodeAt( n );
}
return new File( [ ia ], fileName, { type: mime } );
}
//压缩图片
function compressImg( file ) {
//支持压缩的格式
const reg = /\.(png|jpg|gif|jpeg|webp|PNG|JPG|JPEG)$/
//(reg.test( file.name ) )
if ( reg.test( file.name ) ) {
var name = file.name
var src
var files
var fileSize = parseFloat( parseInt( file[ 'size' ] ) / 1024 / 1024 ).toFixed( 2 );
var read = new FileReader()
read.readAsDataURL( file )
return new Promise( function ( resolve, reject ) {
read.onload = function ( e ) {
var img = new Image();
img.src = e.target.result;
img.onload = function () {
//默认按比例压缩
var w = this.width,
h = this.height;
//生成canvas
var canvas = document.createElement( 'canvas' );
var ctx = canvas.getContext( '2d' );
var base64;
// 创建属性节点
canvas.setAttribute( "width", w );
canvas.setAttribute( "height", h );
ctx.drawImage( this, 0, 0, w, h );
if ( fileSize ) {
//所有图片压缩一半
base64 = canvas.toDataURL( file[ 'type' ],0.1);
}
// 回调函数返回file的值（将base64编码转成file）
files = dataURLtoFile( base64, name ); //如果后台接收类型为base64的话这一步可以省略
// 以服务的方式调用的 Loading 需要异步关闭
// setTimeout( () => {
// loadingInstance.close()
// }, 500 )
//("files",files)
resolve( files )
}
}
} )
}
else {
return new Promise( function ( resolve, reject ) {
// setTimeout( () => {
// loadingInstance.close()
// }, 500 )
resolve( file )
} )
}
};
//结尾处将该方法暴露出来供外部调用
export default {
compressImg,
}
//使用方式 回调的方式使用其方法
this.$compressImage.compressImg(file)
.then(res=> { // res为压缩后二进制文件
console.log(res)
})
其次是组件的方法 （推荐）
组件的方法就很简单，也很好用，同时支持png和jpg格式的图片，不管是什么图都可以压缩为对应比例的大小。组件名字为imageConversion
- 安装
npm i image-conversion --save - 引入
// 图片压缩
//引入组件
import * as imageConversion from 'image-conversion'
//注册组件
Vue.prototype.$imageConversion = imageConversion
//图片验证方法
Vue.prototype.$ImgCompress = ImgCompress
//图片压缩比计算方法
Vue.prototype.$ImgFormat = ImgFormat
//将png图片转换为jpg图片 抛出file流文件
Vue.prototype.$PngGoImg = PngGoImg
//将png图片名字转换为jpg图片名字 抛出转换好的名字
Vue.prototype.$PngGoImgB = PngGoImgB
/**
* @desc：图片压缩相关方法
*/
//图片压缩比计算。 传入图片原sizi大小 与b 计算 算出其百分比大小，抛出告诉组件不可超过其百分比大小
export function ImgCompress( a, b = 0.3 ) {
return Math.ceil( a / 1024 ) * b < 300 ? 300 : Math.ceil( a / 1024 ) * b
}
//图片格式满足则抛出 true 否则抛出 false
export function ImgFormat( a ) {
const reg = /\.(png|jpg|jpeg)$/
return reg.test( a.toLowerCase() )
}
//PNG转换jpg并且抛出转换完成的file流 若非png则直接抛出file
export function PngGoImg( a ) {
let e = a.name.substring( a.name.length - 4 )
if ( e.toLowerCase() === '.png' ) {
let b = a.name.substring( 0, a.name.length - 4 )
let c = b + '.jpg'
let d = new File( [ a ], c, {
type: a.type,
lastModified: Date.now(),
} )
return d
} else {
return a
}
}
//PNG转换jpg并且抛出转换完成的图片Name 若非png 则直接抛出图片Name
export function PngGoImgB( a ) {
let e = a.substring( a.length - 4 )
if ( e.toLowerCase() === '.png') {
let b = a.substring( 0, a.length - 4 )
let c = b + '.jpg'
return c
} else {
return a
}
}
- 使用
//在图片上传之前执行此方法
beforeUpload(imgfile) {
//第一步把拿到的图片是png的图片的file流转换为jpg的图片。
let file = this.$PngGoImg(imgfile)
//判断其是否为图片，不是图片则不执行图片压缩
if (this.$ImgFormat(file.name)) {
return new Promise((resolve, reject) => {
//异步回调的方式将图片的file流及图片的压缩比传进组件内部
this.$imageConversion.compressAccurately(file, this.$ImgCompress(file.size))
.then((res) => {
res = new File([res], file.name, {
type: res.type,
lastModified: Date.now(),
})
//res就是转换并且压缩过的图片
}
})
})
} else {
//直接抛出文件的file流
}
},
更新于2021-03-25-13点48分
