javascript实现获取图片大小及图片等比缩放的方法


Posted in Javascript onNovember 24, 2016

本文实例讲述了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 相关文章推荐
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
Vue3为什么这么快
Sep 23 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 #Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 #Javascript
BootStrap树状图显示功能
Nov 24 #Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 #Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 #Javascript
微信小程序-详解数据缓存
Nov 24 #Javascript
如何实现json数据可视化详解
Nov 24 #Javascript
You might like
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
编写PHP的安全策略
2006/10/09 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
详解PHP队列的实现
2019/03/14 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
php如何获取Http请求
2020/04/30 PHP
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
详解Python循环作用域与闭包
2019/03/21 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
Shell脚本如何向终端输出信息
2014/04/25 面试题
2014年医学生毕业自我鉴定
2014/03/26 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
大专护理专业自荐信
2015/03/25 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
详解JavaScript中Arguments对象用途
2021/08/30 Javascript