JavaScript获取图片原始尺寸与等比缩放实现
作者:青柠时间:2026-10-30 17:19:07浏览:185
本文介绍了使用JavaScript获取图片原始宽高的方法,以及实现图片等比缩放的完整代码。通过Image对象预加载获取真实尺寸,并根据设定宽高限制计算新比例,确保图片不变形。
JavaScript获取图片大小及等比缩放实现
本文通过具体实例,讲解如何利用JavaScript获取图片的实际大小,并实现图片的等比缩放功能。内容旨在为读者提供实用的代码参考。
首先介绍如何获取图片的原始尺寸信息。
var originImage = new Image();
function GetImageWidth(oImage) {
if (originImage.src != oImage.src) originImage.src = oImage.src;
return originImage.width;
}
function GetImageHeight(oImage) {
if (originImage.src != oImage.src) originImage.src = oImage.src;
return originImage.height;
}
接着演示图片等比缩放的逻辑与实现方式。
function SetImage(ImgD, FitWidth, FitHeight) {
var image = new Image();
image.src = ImgD.src;
if (image.width > 0 && image.height > 0) {
if (image.width / image.height >= FitWidth / FitHeight) {
if (image.width > FitWidth) {
ImgD.width = FitWidth;
ImgD.height = (image.height * FitWidth) / image.width;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
} else {
if (image.height > FitHeight) {
ImgD.height = FitHeight;
ImgD.width = (image.width * FitHeight) / image.height;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
}
}
}
如需了解更多JavaScript相关知识,可参考本站专题:《JavaScript切换特效与技巧总结》、《JavaScript图形绘制技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望上述关于JavaScript程序设计的分享能对读者有所帮助。
作者最新文章
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
