#關於如何實現壓縮
查閱MDN找到的是這個API：
HTMLCanvasElement.toBlob() 方法創造Blob物件，用以展示canvas上的圖片；這個圖片檔案可以被快取或儲存到本地，由使用者代理端自行決定。如不特別指明，圖片的型別預設為 image/png，解析度為96dpi。
// callback處理blob主要，type圖片型別，encoderOptions圖片壓縮比例 0-1
canvas.toBlob(callback, type, encoderOptions);
複製程式碼#效果圖
#實現程式碼
<!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>
<style>
body{
padding: 20px 0;
}
#fileSelect{
margin-top: 10px;
padding: 10px 5px;
border: 1px solid chartreuse;
border-radius: 5px;
background: green;
color: white;
text-decoration: none;
}
#fileSelect:hover{
opacity: 0.8;
}
</style>
</head>
<body>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none"
onchange="handleFiles(event,this.files)">
<a href="#" id="fileSelect">點選上傳</a>
</body>
<script>
window.onload = function () {
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click(); // input檔案上傳
}
e.preventDefault();
}, false);
}
function handleFiles(e, files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /^image\//;
if (!imageType.test(file.type)) {
continue;
}
console.log(file);
const width = 500;
const height = 300;
const fileName = file.name;
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = event => {
const img = new Image();
img.src = reader.result;
img.onload = () => {
const elem = document.createElement('canvas');
elem.width = width;
elem.height = height;
const ctx = elem.getContext('2d');
// canvas大小設定
ctx.drawImage(img, 0, 0, width, height);
// 植入內容
document.body.append(elem);
//--------- 如果不需要資源上傳，只需顯示，下面程式碼可以不要了------
ctx.canvas.toBlob((blob) => {
const file = new File([blob], fileName, {
type: 'image/jpeg',
lastModified: Date.now()
});
console.log(file); // file為壓縮後的圖片
}, 'image/jpeg', 10e-9);
// ----------------------
},
reader.onerror = error => console.log(error);
};
}
}
</script>
</html>
複製程式碼#流程
1.new FileReader()
首先需要的是利用這個API來讀取檔案，例項化之後採用 readAsDataURL 的方式來讀取圖片的資源路徑,這裡的相容性不錯，囊闊了幾乎所有瀏覽器版本和平臺。
複製程式碼
reader.readAsDataURL(file); //這樣讀取圖片，上述例子可以多選操作，所以迴圈了下
複製程式碼2.reader.onload的回撥中建立圖片
// 建立圖片內容
const img = new Image();
// 將圖片地址繫結到base64,這裡遇到一個問題採用event.target.result取不到當前，reader下面有result屬性可用
img.src = reader.result;
複製程式碼
3.建立畫布，繪製圖片內容
// 建立canvas畫布
const elem = document.createElement('canvas');
// 設定畫布大小
elem.width = width;
elem.height = height;
//獲取?️
const ctx = elem.getContext('2d')
// 繪製
ctx.drawImage(img, 0, 0, width, height); // drawImage這裡檢視MDN文件即可
// 植入頁面
document.body.append(elem);
複製程式碼4.劃重點壓縮，將canvas壓縮大小轉為image物件
ctx.canvas.toBlob((blob) => {
const file = new File([blob], fileName, {
type: 'image/jpeg', // 這裡的格式可以是jpg，png，gif，png等，都試了下，壓縮大小不變
lastModified: Date.now()
});
console.log(file);
}, 'image/jpeg', 10e-9); // 這裡的10e-9很小了 極限0-1 0是最大壓縮比率， 1這裡有點玄學變大了 超過1 或者小於0 大小大概壓縮了6成左右
複製程式碼
#補充
這裡看到一個相容性的問題,主要考慮的Sarari IOS上，誰叫客戶用呢？
// MDN給除了相容程式碼，大體是是在Object原型新增了toBlob函式實現，貼上新增就好
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
var dataURL = this.toDataURL(type, quality).split(',')[1];
setTimeout(function() {
var binStr = atob( dataURL ),
len = binStr.length,
arr = new Uint8Array(len);
for (var i = 0; i < len; i++ ) {
arr[i] = binStr.charCodeAt(i);
}
callback( new Blob( [arr], {type: type || 'image/jpeg'} ) );
});
}
});
}
複製程式碼#結語
網上資料挺多，沒找到一下就能跑的，查查搜搜實現了功能，還能用，是真的。 -- 2019年3月25日 周邊無人