前端如何用canvas实现图片的等比例缩放
作者：鹤鸣的日常
这篇文章主要介绍了如何使用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.计算缩放比例： 根据目标容器的尺寸和图片的原始尺寸计算缩放比例。
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.计算新的尺寸： 根据缩放比例计算新的宽度和高度。
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);
总结
到此这篇关于前端如何用canvas实现图片的等比例缩放的文章就介绍到这了,更多相关前端canvas图片等比例缩放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！