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 验证密码强弱的小例子
Mar 21 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
Bootstrap table使用方法汇总
Nov 17 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
js数组中去除重复值的几种方法
Aug 03 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
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
php使用PDO方法详解
2014/12/27 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
获取url中用&隔开的参数实例(分享)
2017/05/28 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
js实现随机抽奖
2020/03/19 Javascript
浅析Python中的多重继承
2015/04/28 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Python3 翻转二叉树的实现
2019/09/30 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python实现元素等待代码实例
2019/11/11 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
初一家长会邀请函
2014/01/31 职场文书
计划生育宣传标语
2014/06/21 职场文书
会议简报格式范文
2015/07/20 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫