先占个位置，回头再回来介绍这个宝贝
安装方法
npm i blueimp-load-image
先说一下在用这个插件之前，我都经历了什么。
需求：将图片上传到阿里云之前，对图片进行旋转修正，以方便算法部门进行图像识别减少压力
插件1： Exif.js
插件2： Piexif.js
于是就出现了以下代码：
adjustImgOrientation (file) {
return new Promise((resolve, reject) => {
let reader = new FileReader()
let image = new Image()
reader.onload = function (evt) {
image.src = evt.target.result
image.onload = function () {
let imgWidth = this.width
let imgHeight = this.height
const exifAll = Piexif.load(evt.target.result)
const Orientation = exifAll['0th'][Piexif.ImageIFD.Orientation]
const UserComment = exifAll['Exif'][Piexif.ExifIFD.UserComment]
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
canvas.width = imgWidth
canvas.height = imgHeight
if (Orientation && Orientation !== 1) {
switch (Orientation) {
case 6: // 旋转90度
canvas.width = imgHeight
canvas.height = imgWidth
ctx.rotate(Math.PI / 2)
// (0,-imgHeight) 从旋转原理图那里获得的起始点
ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight)
break
case 3: // 旋转180度
ctx.rotate(Math.PI)
ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight)
break
case 8: // 旋转-90度
canvas.width = imgHeight
canvas.height = imgWidth
ctx.rotate(3 * Math.PI / 2)
ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight)
break
}
} else {
ctx.drawImage(this, 0, 0, imgWidth, imgHeight)
}
canvas.toBlob(blob => {
const reader = new FileReader()
reader.onload = e => {
const exif = {}
exif[Piexif.ExifIFD.UserComment] = UserComment
const exifObj = { 'Exif': exif }
const exifStr = Piexif.dump(exifObj)
const inserted = Piexif.insert(exifStr, e.target.result)
function dataURItoBlob (dataURI) {
var byteString
if (dataURI.split(',')[0].indexOf('base64') >= 0) { byteString = atob(dataURI.split(',')[1]) } else { byteString = unescape(dataURI.split(',')[1]) }
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
var ia = new Uint8Array(byteString.length)
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
return new Blob([ia], { type: mimeString })
}
const b = dataURItoBlob(inserted)
console.log('new_exif:', Piexif.load(inserted))
resolve(b)
}
reader.readAsDataURL(blob)
}, 'image/jpeg')
}
}
reader.readAsDataURL(file)
})
}
大概意思就是：
图片的exif信息里面的旋转角度值进行获取
利用canvas进行摆正
并修改其exif信息为转正的
后面由于以上代码仅支持jpg, jpeg图片格式的转换，如果上传的图片为png格式则会出现错误并阻塞，在重新调研一番后部门大佬决定让我们试试blueimp-load-image插件。马上代码量就下去了，尽管官方文档里面没有对图片的格式进行转换，但是我们可以直接利用canvas.toBlob方法进行格式的转换。提供一个简单的🌰
adjustImgOrientation (file) {
return new Promise((resolve, reject) => {
EXIF.getData(file, function () {
// 一般情况下图片都会有orientation, 如果没有则为网上下载的图，我们可以对没有orientation的图片进行赋值，以免报错
let orientation = EXIF.getTag(this, 'Orientation')
if (!orientation) orientation = true
loadImage(
file,
function (canvas, data) {
if (canvas.type === 'error') {
console.error('Error loading image ' + canvas)
} else {
// 对非jpeg格式的图片进行转换
canvas.toBlob(blob => {
resolve(blob)
}, 'image/jpeg')
}
},
{
orientation: orientation, // 允许根据指定的Exif方向转换画布
canvas: true, // callback 返回 canvas
meta: true // callback 返回 data
}
)
})
})
}
从代码的可读性上去看也好，从重复造轮子的角度去看也好，这个插件确实为我们提供了一定的便利性。
