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 相关文章推荐
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
VUE安装使用教程详解
Jun 03 Javascript
Ant design vue中的联动选择取消操作
Oct 31 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
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python之文字转图片方法
2018/05/10 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
python提取xml里面的链接源码详解
2019/10/15 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
基于python实现计算两组数据P值
2020/07/10 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
专业毕业生个性的自我评价
2013/10/03 职场文书
测绘工程个人的自我评价
2013/11/10 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android