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

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

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

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;

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

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

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

                // 設(shè)置縮放后的圖片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ì)算縮放比例：根據(jù)目標(biāo)容器的尺寸和圖片的原始尺寸計(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ì)算新的尺寸：根據(jù)縮放比例計(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);