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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
JavaScript中的继承之类继承
May 01 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
vue如何在data中引入图片的正确路径
Jun 05 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中路径问题的解决方案
2006/10/09 PHP
文件上传的实现
2006/10/09 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
在Django中创建第一个静态视图
2015/07/15 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python 登录网站详解及实例
2017/04/11 Python
获取Django项目的全部url方法详解
2017/10/26 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
口腔医学技术应届生求职信
2013/11/09 职场文书
安全宣传标语
2014/06/10 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
2014年维稳工作总结
2014/11/18 职场文书
交通事故和解协议书
2015/01/27 职场文书
英语辞职信怎么写
2015/02/28 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python