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的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
vue el-upload上传文件的示例代码
Dec 21 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中简单的对称加密算法实现
2017/01/05 PHP
script标签的 charset 属性使用说明
2010/12/04 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
js实现每日签到功能
2018/11/29 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
Python的函数的一些高阶特性
2015/04/27 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
wxpython实现图书管理系统
2018/03/12 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
python中pika模块问题的深入探究
2018/10/13 Python
Python学习笔记之装饰器
2020/08/06 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
自我鉴定四大框架
2014/01/17 职场文书
大学生党员自我批评
2014/02/14 职场文书
普通话演讲稿
2014/09/03 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python