基于Canvas+Exif实现的图片压缩功能
前言：本文记录作者在vue项目中因图片上传限制及后台保存图片过大的问题，因此在图片上传到后台前做一个图片压缩的功能。如果觉得作者写的不错，希望得到您的点赞/收藏/支持，如果有不同意见，欢迎下方评论区留言。
一、初步封装的JS方法及调用
注：
1、此方法以满足大致的功能需求，但是还有一个小问题！！！下面在解释为啥，哈哈哈
2、以下代码注释已经很清晰了。
index.js
/**
* 将图片压缩为对应尺寸
* @param {Object} options
* @param {String} options.img 图片的url或者base64数据
* @param {Number} options.width 目标图片的宽度
* @param {Number} options.height 目标图片的高度
* @param {Number} options.quality 生成目标图片质量
* @param {String} options.fit 图片压缩填充模式默认 scale：按比例缩放，可选 fill：按使用目标尺寸
* @param {String} options.type 图片压缩类型默认 jpg，可选 png
* @param {Number} options.rotate 图片旋转，由于手机拍照的角度和我们使用的头像不一致，需要旋转 默认0 仅支持 90 180 -90
* @returns {Promise} then {width,height,img}
*/
export function pictureCompress (options) {
return new Promise((resolve, reject) => {
if (!options.img) {
reject(new Error('need img'))
return
}
let imgSrc = options.img,
width = options.width || 640,
height = options.height || 640,
type = options.type || 'jpg',
quality = options.quality || 0.92,
fit = options.fit || 'scale',
rotate = options.rotate || 0
if (width <= 0 || height <= 0) {
reject(new Error('dist width or height need > 0'))
return
}
if (!/jpg|png|jpeg/.test(type)) {
reject(new Error('type need jpg or png!'))
return
}
if (rotate !== 90 && rotate !== -90 && rotate !== 0 && rotate !== 180) {
reject(new Error('rotate mast be 0 90 -90 180!'))
return
}
let changeWidthAndHeight = rotate === 90 || rotate === -90
let image = new Image()
image.src = imgSrc
image.onload = function () {
let distSize = getDistSize({
width: changeWidthAndHeight ? this.naturalHeight : this.naturalWidth,
height: changeWidthAndHeight ? this.naturalWidth : this.naturalHeight
}, {
width: changeWidthAndHeight ? height : width,
height: changeWidthAndHeight ? width : height
}, fit)
let imgData = compress(this, distSize.width, distSize.height, type, quality, rotate)
resolve({
width: distSize.width,
height: distSize.height,
img: imgData
})
}
image.onerror = function (err) {
reject(err)
}
})
}
/**
* 将图片转换为固定尺寸的
* @param {Image} img 图片数据
* @param {Number} width 转换之后的图片宽度
* @param {Number} height 转换之后的图片高度
* @param {String} type base64的图片类型 jpg png
* @param {Number} quality 转换之后的图片质量
*/
export function compress (img, width, height, type, quality, rotate) {
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
let types = {
'jpg': 'image/jpeg',
'jpeg': 'image/jpeg',
'png': 'image/png'
}
canvas.width = width
canvas.height = height
ctx.drawImage(img, 0, 0, width, height)
return canvas.toDataURL(types[type], quality)
}
/**
* 选择源尺寸与目标尺寸比例中较小的那个，保证图片可以完全显示
* 最大值不超过1，如果图片源尺寸小于目标尺寸，则不做处理，返回图片原尺寸
* @param {Object} source 源图片的宽高
* @param {Object} dist 目标图片的宽高
*/
export function getDistSize (source, dist, fit) {
if (fit === 'fill') return dist
let scale = Math.min(dist.width / source.width, dist.height / source.height, 1)
return {
width: Math.round(source.width * scale),
height: Math.round(source.height * scale)
}
}
// 将base64转换为file文件
export function dataURLtoFile (dataurl, filename) {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, {
type: mime })
}
下面是调用该方法:index.vue
import {
pictureCompress , dataURLtoFile } from "./index.js"
afterRead (file) {
pictureCompress({
img: file.content, //上传的图片的base64
}).then(res => {
//console.log(res) 可自行输出res返回的参数数据
//此处为将压缩过后的base64转换成file文件流格式
console.log(dataURLtoFile(res.img,file.file.name))
})
}
到这里大家以为就能使用了吗？答案是可以的。但是！注意了canvas进行移动端手机照片上传时，发现IOS手机上传照片会逆时针旋转90度的问题。那么我们来看以下的代码如何解决的吧~~
二、使用Exif实现图片旋转
解决这个问题的思路是：获取到照片拍摄的方向角，对旋转后的IOS照片进行角度旋转修正。
这里主要用到Orientation属性（最常出现的几个参数）。说明如下：
| 旋转角度 | 参数 |
|---|---|
| 0° | 1 |
| 180° | 3 |
| 顺时针90° | 6 |
| 逆时针90° | 8 |
1、安装Exif.js
cnpm install exif-js --save
2、引入并使用
import EXIF from 'exif-js'
let orientation
EXIF.getData(img, function () {
orientation = Number(EXIF.getTag(this, 'Orientation'))
})
那么到现在，就已经拿到了图片旋转角度的参数。就可以对上面初步封装的方法进行一个修改。
三、完整封装的JS方法
注：
1、因为是针对IOS机型的修改，所以增加了一层判断条件。详情看代码~
index.js
import EXIF from 'exif-js'
/**
* 将图片压缩为对应尺寸
* @param {Object} options
* @param {String} options.img 图片的url或者base64数据
* @param {Number} options.width 目标图片的宽度
* @param {Number} options.height 目标图片的高度
* @param {Number} options.quality 生成目标图片质量
* @param {String} options.fit 图片压缩填充模式默认 scale：按比例缩放，可选 fill：按使用目标尺寸
* @param {String} options.type 图片压缩类型默认 jpg，可选 png
* @param {Number} options.rotate 图片旋转，由于手机拍照的角度和我们使用的头像不一致，需要旋转 默认0 仅支持 90 180 -90
* @returns {Promise} then {width,height,img}
*/
export function pictureCompress (options) {
return new Promise((resolve, reject) => {
if (!options.img) {
reject(new Error('need img'))
return
}
let imgSrc = options.img,
width = options.width || 640,
height = options.height || 640,
type = options.type || 'jpg',
quality = options.quality || 0.92,
fit = options.fit || 'scale',
rotate = options.rotate || 0
if (width <= 0 || height <= 0) {
reject(new Error('dist width or height need > 0'))
return
}
if (!/jpg|png|jpeg/.test(type)) {
reject(new Error('type need jpg or png!'))
return
}
if (rotate !== 90 && rotate !== -90 && rotate !== 0 && rotate !== 180) {
reject(new Error('rotate mast be 0 90 -90 180!'))
return
}
let changeWidthAndHeight = rotate === 90 || rotate === -90
let image = new Image()
image.src = imgSrc
image.onload = function () {
let distSize = getDistSize({
width: changeWidthAndHeight ? this.naturalHeight : this.naturalWidth,
height: changeWidthAndHeight ? this.naturalWidth : this.naturalHeight
}, {
width: changeWidthAndHeight ? height : width,
height: changeWidthAndHeight ? width : height
}, fit)
let imgData = compress(this, distSize.width, distSize.height, type, quality, rotate)
resolve({
width: distSize.width,
height: distSize.height,
img: imgData
})
}
image.onerror = function (err) {
reject(err)
}
})
}
/**
* 将图片转换为固定尺寸的
* @param {Image} img 图片数据
* @param {Number} width 转换之后的图片宽度
* @param {Number} height 转换之后的图片高度
* @param {String} type base64的图片类型 jpg png
* @param {Number} quality 转换之后的图片质量
*/
export function compress (img, width, height, type, quality, rotate) {
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
let types = {
'jpg': 'image/jpeg',
'jpeg': 'image/jpeg',
'png': 'image/png'
}
canvas.width = width
canvas.height = height
let orientation
EXIF.getData(img, function () {
orientation = Number(EXIF.getTag(this, 'Orientation'))
})
// 针对IOS系统上传照片会旋转
if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
if (orientation != "" && orientation != 1) {
switch (orientation) {
case 3:// 需要180度旋转
rotateImg(img, 'right2', canvas, width, height);
break;
case 6:// 需要顺时针（向左）90度旋转
rotateImg(img, 'left', canvas, width, height);
break;
case 8:// 需要逆时针（向右）90度旋转
rotateImg(img, 'right', canvas, width, height);
break;
default:
ctx.drawImage(img, 0, 0, width, height);
break;
}
} else {
ctx.drawImage(img, 0, 0, width, height)
}
} else {
ctx.drawImage(img, 0, 0, width, height)
}
return canvas.toDataURL(types[type], quality)
}
export function rotateImg (img, direction, canvas, width, height) {
var min_step = 0;
var max_step = 3;
if (img == null) {
return;
}
var step = 2;
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
step > max_step && (step = min_step);
} else if (direction == 'right2') {
step = 2;
} else {
step--;
step < min_step && (step = max_step);
}
var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height, width, height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height, width, height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0, width, height);
break;
}
}
/**
* 选择源尺寸与目标尺寸比例中较小的那个，保证图片可以完全显示
* 最大值不超过1，如果图片源尺寸小于目标尺寸，则不做处理，返回图片原尺寸
* @param {Object} source 源图片的宽高
* @param {Object} dist 目标图片的宽高
*/
export function getDistSize (source, dist, fit) {
if (fit === 'fill') return dist
let scale = Math.min(dist.width / source.width, dist.height / source.height, 1)
return {
width: Math.round(source.width * scale),
height: Math.round(source.height * scale)
}
}
// 将base64转换为file文件
export function dataURLtoFile (dataurl, filename) {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, {
type: mime })
}
index.vue
import {
pictureCompress , dataURLtoFile } from "./index.js"
afterRead (file) {
pictureCompress({
img: file.content, //上传的图片的base64
}).then(res => {
//console.log(res) 可自行输出res返回的参数数据
//此处为将压缩过后的base64转换成file文件流格式
console.log(dataURLtoFile(res.img,file.file.name))
//下面就是请求接口上传压缩后的图片代码位置↓
})
}
至此，图片上传前的压缩功能就写好了！
最后来复习一下：如果觉得作者写的不错，希望得到您的点赞/收藏/支持，如果有不同意见，欢迎下方评论区留言。