JS按比例缩放图片
1、JS代码
<script type="text/javascript" language="javascript">
var flag = false;
function DrawImage3(iwidth,iheight,ImgD) {
var image = new Image();
image.src = ImgD.src;
if (image.width > && image.height > ) {
flag = true;
//原图宽除高的值和定义宽除高的值的比较
if (image.width / image.height >= iwidth / iheight) {
// 原图的宽大于定义的宽
if (image.width > iwidth) {
ImgD.width = iwidth;
//定义的宽度和原图的宽度的比例,同比缩小高度
ImgD.height = (image.height * iwidth) / image.width;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
ImgD.alt = image.width + "×" + image.height;
}
else {
// 原图的高大于定义的高
if (image.height > iheight) {
ImgD.height = iheight;
//定义的高度和原图的高度的比例,同比缩小宽度
ImgD.width = (image.width * iheight) / image.height;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
ImgD.alt = image.width + "×" + image.height;
}
}
}
</script>
2、前代代码
<img alt='' src="Image/wuqilong.jpg" onload="DrawImage3(200,150,this)" />
JS按比例缩放图片的更多相关文章
- JS等比例缩放图片,限定最大宽度和最大高度
JS等比例缩放图片,限定最大宽度和最大高度 JavaScript //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){ ...
- js同比例缩放图片
function DrawImage(ImgD, FitWidth, FitHeight) { var image = new Image(); image.src = ImgD.src; if (i ...
- JavaScript等比例缩放图片
js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,以稳定页面布局,本代码段就是完成了此功 ...
- JS实现等比例缩放图片
JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...
- PHP按最大宽高等比例缩放图片类
本来用phpthumb来缩略图片是十分方便的,但是最近在sae上写项目发现phpthumb在sae上保存文件时会出问题,想来实现一个简单的按最大宽高等比例缩放图片类也并不困难,于是便自己写了一个方便修 ...
- PHP按最大宽高等比例缩放图片类 http://www.oschina.net/code/snippet_876708_21113
PHP按最大宽高等比例缩放图片类 http://www.oschina.net/code/snippet_876708_21113 php 等比例缩小图片 http://www.111cn.net/p ...
- 【Thumbnailator】java 使用Thumbnailator实现等比例缩放图片,旋转图片等【转载】
Thumbnailator概述: Thumbnailator是与Java界面流畅的缩略图生成库.它简化了通过提供一个API允许精细的缩略图生成调整生产从现有的图像文件的缩略图和图像对象的过程, ...
- C#等比例缩放图片
等比例缩放图片(C#) private Bitmap ZoomImage(Bitmap bitmap, int destHeight, int destWidth) { try { System.Dr ...
- DTCMS,添加文章时,内容中第一张图片作缩略图,并且等比例缩放图片
DTCMS,添加文章时,内容中第一张图片作缩略图 admin/article/article_edit.aspx.cs 导入: using System.Drawing;using System.Dr ...
随机推荐
- 剑指offer——570~n-1中缺失的数字
题目:0~n-1中缺失的数字. 一个长度为n-1的递增排序数组中的所有数字都是唯一的,并且每个数字都在范围0~n-1之内. 在范围0~n-1内的n个数字中有且只有一个数字不在该数组中,请找出这个数字. ...
- Feign 系列(05)Spring Cloud OpenFeign 源码解析
Feign 系列(05)Spring Cloud OpenFeign 源码解析 [TOC] Spring Cloud 系列目录(https://www.cnblogs.com/binarylei/p/ ...
- export 与 export default
export 和 import 都属于 ES6 的内容. node 的 module 遵循的是 CommonJS规范,requirejs遵循AMD,seajs遵循CMD,虽各有不同, 但总之还是希望保 ...
- Ubuntu18.04 一键升级Python所有第三方包
一.pip是什么 pip 是 Python 包管理工具,该工具提供了对Python 包的查找.下载.安装.卸载的功能. 二.升级pip版本 1.默认Ubuntu自带的pip (pip 9.0.1)是基 ...
- 「CSP-S 2019」树的重心
题目 考场上送\(75pts\)真实良心,正解不难:考虑直接对于每一个点算割掉多少条边能使得这个点成为重心,不难发现对于一个不是重心的点,我们要割掉的那条边一定在那个大于\(\lfloor \frac ...
- 面向连接的echo服务编程实例
以下是echo_serv.c的源码,提供创建服务端,绑定套接字到本机IP的8080端口,当收到客户端发送的字符串就在屏幕上打印出来,并且把字符串发送给客户端 // echo_serv.c – gcc ...
- Es6中let与const的区别:(神奇的块级作用域)
所谓的块级作用域:形成一个暂时性的死区:{ } 一.共同点: a:都是用来声明变量: b:都能形成一个块级作用域: c:都只能在声明变量的块级作用域里面有效: 二.不同点: 1.let: a:在 ...
- 一个服务io占满,服务器无响应
(1).服务器io占满,服务无响应, sar -q -f /var/log/sa/sa28 上图显示plist-sz 增加了一倍 plist-sz 说明:进程列表中的进程(processes)和线程 ...
- 【学术篇】SDOI2009 SuperGCD
特别说明: 为了避免以后搬家时的麻烦, 这里的文章继续沿用csdn的风格和分类好了~ Emmmm这个题是一道高精度的模板题啊~ 既然是高精度的裸题, 那我们这些懒人当然是选择:用python啦~ 懒癌 ...
- JS自运行函数的写法和MVVM框架数据驱动的底层逻辑
1.JS自运行函数的写法 ( function(){ console.log(111)} )( ) !function(){ console.log(111) }() ( function(){}() ...