/**
* img转Base64
* @param imgFile {File} 图片文件
* @param maxLen {Number} 目标大小
* @returns {Promise<any>}
*/
function imgToBase64(imgFile, maxLen) {
return new Promise((resolve, reject) => {
const img = new Image()
// 读取客户端上的文件
const reader = new FileReader()
reader.onload = function() {
// 读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload,
const url = reader.result
// reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
img.src = url
}
img.onload = function() {
// 生成比例
const width = img.width
const height = img.height
// 计算缩放比例
let rate = 1
if (width >= height) {
if (width > maxLen) {
rate = maxLen / width
}
} else {
if (height > maxLen) {
rate = maxLen / height
}
}
img.width = width * rate
img.height = height * rate
// 生成canvas
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = img.width
canvas.height = img.height
ctx.drawImage(img, 0, 0, img.width, img.height)
const base64 = canvas.toDataURL('image/jpeg', 0.9)
resolve(base64)
}
reader.readAsDataURL(imgFile)
})
}
img 转 Base64
最新推荐文章于 2024-08-30 07:34:18 发布