javascript简单实现等比例缩小图片的方法


Posted in Javascript onJuly 27, 2016

本文实例讲述了javascript简单实现等比例缩小图片的方法。分享给大家供大家参考,具体如下:

//等比例缩小图片
function changeImg(obj,width,height) {
  var img = new Image();
  img.src = document.getElementById(obj.id).src
  var ys_w = img.width;
  var ys_h = img.height;
  if(ys_w > width || ys_h > height)
  {
    var scale;
    var scale1 = ys_w / width;
    var scale2 = ys_h / height;
    //alert(scale1+","+scale2);
    if(scale1 > scale2)
    {
      scale = scale1;
    }
    else
    {
      scale = scale2;
    }
    document.getElementById(obj.id).style.width = ys_w / scale;
    document.getElementById(obj.id).style.height = ys_h / scale;
  }
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 入门级学习笔记及源码
Jan 22 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 #Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 #Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 #Javascript
第一次接触神奇的Bootstrap表单
Jul 27 #Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 #Javascript
基于jQuery实现页面搜索功能
Mar 26 #Javascript
JS中的数组方法笔记整理
Jul 26 #Javascript
You might like
Zerg兵种介绍
2020/03/14 星际争霸
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
永不消失的title提示代码
2007/02/15 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
Angular实现form自动布局
2016/01/28 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
Vue精简版风格概述
2018/01/30 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
python读写二进制文件的方法
2015/05/09 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
利用Python如何生成便签图片详解
2018/07/09 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
python实现在线翻译
2020/06/18 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
幼儿园教研活动方案
2014/01/19 职场文书
2014年国庆节寄语
2014/09/19 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
离婚协议书怎么写
2015/01/26 职场文书
2015年共青团工作总结
2015/05/15 职场文书
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL