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 相关文章推荐
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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代码简化
2010/02/08 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
php绘制一条弧线的方法
2015/01/24 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
newxtree.js代码
2007/03/13 Javascript
javascript 关闭IE6、IE7
2009/06/01 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
Python解决八皇后问题示例
2018/04/22 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
python实现局域网内实时通信代码
2019/12/22 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
上班迟到检讨书
2014/01/10 职场文书
民主评议党员个人总结
2015/02/13 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书