實現思路 獲取input的file 使用fileReader() 將圖片轉為base64 使用canvas讀取base64 並降低解析度 把canvas數據轉成blob對象 把blob對象轉file對象 完成壓縮 相關代碼： 最後回調函數中的files可以直接當做正常的input file 使用，如 ...
實現思路
- 獲取input的file
- 使用fileReader() 將圖片轉為base64
- 使用canvas讀取base64 並降低解析度
- 把canvas數據轉成blob對象
- 把blob對象轉file對象
- 完成壓縮
相關代碼：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="file" id="file"> <script> document.getElementById('file').addEventListener('change',function (e) { let fileObj = e.target.files[0] let that = this; compressFile(fileObj,function (files) { console.log(files) that.value = '' // 加不加都行，解決無法上傳重覆圖片的問題。 }) }) /** * 壓縮圖片 * @param file input獲取到的文件 * @param callback 回調函數，壓縮完要做的事，例如ajax請求等。 */ function compressFile(file,callback) { let fileObj = file; let reader = new FileReader() reader.readAsDataURL(fileObj) //轉base64 reader.onload = function(e) { let image = new Image() //新建一個img標簽（還沒嵌入DOM節點) image.src = e.target.result image.onload = function () { let canvas = document.createElement('canvas'), // 新建canvas context = canvas.getContext('2d'), imageWidth = image.width / 2, //壓縮後圖片的大小 imageHeight = image.height / 2, data = '' canvas.width = imageWidth canvas.height = imageHeight context.drawImage(image, 0, 0, imageWidth, imageHeight) data = canvas.toDataURL('image/jpeg') // 輸出壓縮後的base64 let arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1], // 轉成blob bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } let files = new window.File([new Blob([u8arr], {type: mime})], 'test.jpeg', {type: 'image/jpeg'}) // 轉成file callback(files) // 回調 } } } </script> </body> </html>
最後回調函數中的files可以直接當做正常的input file 使用，如果後續涉及到ajax，可以直接放到formData() 里。
本例除文中源碼外，不另外提供源碼。
參考地址1：https://blog.csdn.net/yasha97/article/details/83629057
參考地址2：https://blog.csdn.net/yasha97/article/details/83629510
在原文章基礎上添加了blob => file的對象轉化。
