前端圖片壓縮方案
壓縮圖片原理：
先透過 js 中 img 建構函式，例項化 img 物件，後將圖片的路徑給轉移到中，再建立一個 canvas 畫布，後對畫布進行各方面的數值的設定。
如程式碼所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="1000" height="1000"></canvas>
//設定畫布的寬高
</body>
</html>js 部分
//圖片壓縮，利用image物件 和canvas繪圖將影像壓縮
window.onload = function () {
var mycanvas = document.getElementById("mycanvas");
var ctx = mycanvas.getContext("2d");
var img = new Image();
img.src = "./實驗.jpg";
img.onload = function () {
// alert('載入完畢')
// 將圖片畫到canvas上面上去
ctx.drawImage(img, 0, 0, 500, 500);
};
};base64 壓縮
//壓縮base64方法
function dealImage(base64, w, callback) {
var newImage = new Image();
var quality = 0.6; //壓縮係數0-1之間
newImage.src = base64;
newImage.setAttribute("crossOrigin", "Anonymous"); //url為外域時需要
var imgWidth, imgHeight;
newImage.onload = function () {
imgWidth = this.width;
imgHeight = this.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = (w * imgHeight) / imgWidth;
} else {
canvas.height = w;
canvas.width = (w * imgWidth) / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
quality = 0.6;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL("image/jpeg", quality); //壓縮語句
callback(base64); //必須透過回撥函式返回，否則無法及時拿到該值
};
}/**
* 返回壓縮後的base64
* @param file
*/
export function getPicCompress(file: File) {
return (
new Promise() <
string >
((resolve, reject) => {
let quality = 0.8; // 壓縮係數0-1之間
let reader = new FileReader();
reader.readAsDataURL(file);
let imgWidth;
let imgHeight;
reader.onload = function (e) {
let image: any = new Image(); // 新建一個img標籤（還沒嵌入DOM節點)
image.src = e.target.result;
image.onload = function () {
imgWidth = image.width;
imgHeight = image.height;
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > 1024) {
if (imgWidth > imgHeight) {
canvas.width = 1024;
canvas.height = (1024 * imgHeight) / imgWidth;
} else {
canvas.height = 1024;
canvas.width = (1024 * imgWidth) / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
quality = 0.8;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
let base64 = canvas.toDataURL("image/jpeg", quality); // 壓縮語句
resolve(base64); // 必須透過回撥函式返回，否則無法及時拿到該值
};
reader.onerror = (error) => reject(error);
};
})
);
}基本都是透過圖片轉 canvas 然後透過 toDataURL 到處低質量的圖完成的壓縮。
toDataURl 方法接收兩個引數，返回一個包含圖片展示的 data URI 。可以使用 type 引數其型別，預設為 PNG 格式。圖片的解析度為 96dpi。
- type 可選 圖片格式，預設為 image/png
- encoderOptions 可選 在指定圖片格式為 image/jpeg 或 image/webp 的情況下，可以從 0 到 1 的區間內選擇圖片的質量。如果超出取值範圍，將會使用預設值 0.92。其他引數會被忽略。