<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" name="" id="filedemo">
<script>
思路
將文件類型的（file）圖片轉成base64的編碼方式
創建Image去接受圖片文件的信息
創建等比例大小的canvas
將圖片繪製到canvas
對canvas進行壓縮，獲取新的信息
將新的信息轉換爲圖片文件
鏈接：https://www.jianshu.com/p/177f7327423e
// canvas壓縮會失真， 但有個問題就是圖片過小，‘壓縮’後會更大，這個區間大概是1.5M以內，所以超過1.5M才進行此canvas壓縮
let filetab = document.getElementById('filedemo')
filetab.onchange = function (e) {
let file = e.target.files[0] // 獲取到的圖片信息
let file_type = file.type // 圖片的類型
let file_name = file.name // 圖片的名字
let file_size = file.size // 圖片的大小
console.log(`壓縮前文件大小${file_size}`)
comImg(file, 0.1, filename = `new_${file.name}`)
}
/**
* @param {file} 需要壓縮的圖片文件
* @return 圖片的Base64
*/
function ImageToBase64(file) {
return new Promise(resolve => {
if (!file) resolve(null) // 沒有文件時直接返回
let fileReader = new FileReader()
fileReader.readAsDataURL(file)
fileReader.onload = function (e) {
// e 是 onLoad之後返回的參數信息，其中就有我們需要的Base64的信息
let imgBase64Info = e.target.result
resolve(imgBase64Info) // 返回獲取到的Base64信息
}
})
}
/**
* @param {base64} 獲取BASE64的返回值
* @return 新的Base64
*/
function comperImage(base64, filetype, quality) {
return new Promise(resolve => {
if (!base64) resolve() // 沒有給信息直接返回
let image = new Image()
image.src = base64
image.onload = function (e) {
let info = e.path[0]
let sacle = info.width / info.height // 獲取寬高比例
console.log(sacle)
let canvas = document.createElement('canvas') // 創建畫布
let ctx = canvas.getContext('2d')
canvas.width = info.width // 設置畫布寬高
canvas.height = info.height
ctx.drawImage(image, 0, 0, canvas.width, canvas.height) // 將圖片繪製在畫板上
let newBase64 = canvas.toDataURL(filetype, quality) // 將畫板內容轉爲圖片並設置壓縮比例
resolve(newBase64)
}
})
}
/*/**
* Base64轉換爲File
* @param { string } 文件的url，此處爲生成的新的Base64
* @param { string } 要生成的文件名字
* @return File
*/
function dataURLtoFile(dataurl, filename) {
return new Promise(resolve => {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
resolve(new File([u8arr], filename, { type: mime }))
})
}
/**
* 壓縮圖片
* @param { file } 需要壓縮的文件
* @return
*/
async function comImg(file, quality, filename = `new_${file.name}`) {
// 將png格式文件轉爲JPEG輸出，因爲Png圖片不能用這種方式進行壓縮
let filetype = file.type === 'image/png' ? 'image/jpeg' : file.type
let base64 = await ImageToBase64(file) // 獲取需要壓縮圖片的base64
let newBase64 = await comperImage(base64, filetype, quality) // 獲取壓縮後的base64
let newFile = await dataURLtoFile(newBase64, filename) // 生成新文件
console.log(`壓縮後文件大小${newFile.size}`)
//這裏可以寫一個 上傳的方法
// uploadeNewfile(newFile)
//在頁面上顯示
let resultImg = new Image() // 創建Image標籤
resultImg.src = URL.createObjectURL(newFile) // 創建img的src
document.body.appendChild(resultImg) //添加至頁面
}
//上傳壓縮後的圖片
function uploadeNewfile(newFile){
//待寫
}
</script>
</body>
</html>