前端如何用canvas實現(xiàn)圖片的等比例縮放

更新時間：2024年11月28日 08:26:11 作者：鶴鳴的日常

這篇文章主要介紹了如何使用HTML和JavaScript加載、讀取、縮放和繪制圖片到canvas上的相關資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Image Resize</title>
</head>

<body>
    <input type="file" id="imageInput" accept="image/*">
    <div>
        <canvas id="canvasOriginal" style="border:1px solid #000;"></canvas>
        <canvas id="canvasResized" style="border:1px solid #000;"></canvas>
    </div>
    <script src="script.js"></script>
</body>

</html>

JavaScript代碼

document.getElementById('imageInput').addEventListener('change', function (event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function (e) {
            const img = new Image();
            img.onload = function () {
                const originalCanvas = document.getElementById('canvasOriginal');
                const resizedCanvas = document.getElementById('canvasResized');
                const ctxOriginal = originalCanvas.getContext('2d');
                const ctxResized = resizedCanvas.getContext('2d');
                const originalWidth = img.width;
                const originalHeight = img.height;
                let width, height, scale;

                // 設置原始圖片canvas尺寸
                originalCanvas.width = originalWidth;
                originalCanvas.height = originalHeight;
                // 繪制原始圖片
                ctxOriginal.drawImage(img, 0, 0, originalWidth, originalHeight);

                // 計算縮放比例
                if (Math.max(originalWidth, originalHeight) > 1080) {
                    scale = 1080 / Math.max(originalWidth, originalHeight);
                } else {
                    scale = 1;
                }

                // 計算縮放后的尺寸
                width = originalWidth * scale;
                height = originalHeight * scale;

                // 設置縮放后的圖片canvas尺寸
                resizedCanvas.width = width;
                resizedCanvas.height = height;
                // 繪制縮放后的圖片
                ctxResized.drawImage(img, 0, 0, width, height);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

代碼解釋

1.加載圖片：使用 FileReader 讀取用戶選擇的圖片文件。

const reader = new FileReader();
reader.onload = function (e) {
    const img = new Image();
    img.onload = function () {
    
        // 處理代碼邏輯        

    };
    img.src = e.target.result;
};
reader.readAsDataURL(file);

2.獲取圖片原始尺寸：獲取圖片的原始寬度和高度。

const originalWidth = img.width;
const originalHeight = img.height;

3.計算縮放比例：根據(jù)目標容器的尺寸和圖片的原始尺寸計算縮放比例。

let width, height, scale;

if (Math.max(originalWidth, originalHeight) > 1080) {
    scale = 1080 / Math.max(originalWidth, originalHeight);
} else {
    scale = 1;
}

width = originalWidth * scale;
height = originalHeight * scale;

4.計算新的尺寸：根據(jù)縮放比例計算新的寬度和高度。

const resizedWidth = originalWidth * scale;
const resizedHeight = originalHeight * scale;

5. 繪制圖片：使用drawImage方法繪制圖片到canvas上。

// 使用canvas繪制原始圖片。
originalCanvas.width = originalWidth;
originalCanvas.height = originalHeight;
ctxOriginal.drawImage(img, 0, 0, originalWidth, originalHeight);

// 使用canvas繪制縮放后的圖片。

resizedCanvas.width = width;
resizedCanvas.height = height;
ctxResized.drawImage(img, 0, 0, width, height);