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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
js event事件的传递与冒泡处理
Dec 06 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
网站发布后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 分页分组类
2009/12/10 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php生成静态页面的简单示例
2014/04/17 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
js实现小时钟效果
2020/03/25 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
Python函数参数操作详解
2018/08/03 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Python关于反射的实例代码分享
2020/02/20 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
会计稽核岗位职责
2015/04/13 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL