<script  language="javascript">
//显示缩略图
function DrawImage(ImgD,width_s,height_s){
/*var width_s=139;
var height_s=104;
*/
var image=new Image();
image.src=ImgD.src;
if(image.width> && image.height>){
flag=true;
if(image.width/image.height>=width_s/height_s){
if(image.width>width_s){
ImgD.width=width_s;
ImgD.height=(image.height*width_s)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
else{
if(image.height>height_s){
ImgD.height=height_s;
ImgD.width=(image.width*height_s)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
/*else{
ImgD.src="";
ImgD.alt=""
}*/
}
</script> 调用
<div><img src="图片" align="center" onload="DrawImage(this,200,200)"></div>

JS创建缩略图的更多相关文章

  1. JavaScript with Image:创建缩略图

    当图片很大,直接把图片从Server下载到浏览器上看是一种很不明智的做法,浪费了服务器的资源,网络带宽和客户端的资源.所以,通常Server和Client之间会传输缩略图,只有当Client请求某张图 ...

  2. 使用 Amazon S3 触发器创建缩略图

    使用 Amazon S3 触发器创建缩略图 环境 centos (注意,必须是Linux环境) node12.x 安装教程 curl -sL https://rpm.nodesource.com/se ...

  3. PHP 创建缩略图

    一.成比例缩小图像 <?php /* 创建缩略图 */ $file = __DIR__.'/button.png'; $scale = 0.5; // 比例 $image = ImageCrea ...

  4. 用Backbone.js创建一个联系人管理系统(五)

    原文: Build a Contacts Manager Using Backbone.js: Part 5 这是这系列教程最后一部分了. 之前所有的增删改都在前端完成. 这部分我们要把Contact ...

  5. 使用 iosOverlay.js 创建 iOS 风格的提示和通知

    iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...

  6. Dynamics.js - 创建逼真的物理动画的 JS 库

    Dynamics.js 是一个用来创建物理动画 JavaScript 库.你只需要把dynamics.js引入你的页面,然后就可以激活任何 DOM 元素的 CSS 属性动画,也可以用户 SVG 属性. ...

  7. 使用three.js创建3D机房模型-分享一

    序:前段时间公司一次研讨会上,一市场部同事展现了同行业其他公司的3D机房,我司领导觉得这个可以研究研究,为了节约成本,我们在网上大量检索,最后找到一位前辈的博文[TWaver的技术博客],在那篇博文的 ...

  8. Node.js 创建HTTP服务器

    Node.js 创建HTTP服务器 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi. 从这个角度看,整个& ...

  9. 用Backbone.js创建一个联系人管理系统(一)

    原文 Build a Contacts Manager Using Backbone.js: Part 1 在这个教程里我们将会使用Backbone.js,Underscore.js,JQuery创建 ...

随机推荐

  1. (四)SQL Server分区管理

    一.拆分分区(SPLIT) 在已有分区上添加一个新分区. 如下图所示,将分区03拆分成03和04分区,拆分方式先锁定旧03分区的所有数据,后将旧03分区相关数据迁移到分区04,最后删除旧03上的对应分 ...

  2. unity3D游戏-WorldFight

    计划写一个2D策略类的游戏,玩法类似炉石传说,以收集卡牌为主,不同的地方在于战斗方式类似棋类游戏,而且还有一个技能系统作为补充. ---更新(2015.7.13) v2.0.1更新: 添加了基本AI ...

  3. storyboard连线容易出现的问题

    - 连接的方法代码被删掉,但是连线没有去掉 - 可能会出现方法找不到错误 - unrecognized selector sent to instance- 连接的属性代码被删掉,但是连线没有去掉 - ...

  4. CSS3 之 flexbox 响应式的未来

    CSS3 之 flexbox 响应式的未来 flexbox 伸缩盒模型 . flex: CSS3中一个重要的而且非常有用的属性,用来制作弹性布局是非常的方便而又强大. . flex布局:旨在提供一个更 ...

  5. soj杂题

    unique()函数是一个去重函数,STL中unique的函数 unique的功能是去除相邻的重复元素(只保留一个),还有一个容易忽视的特性是它并不真正把重复的元素删除.他是c++中的函数,所以头文件 ...

  6. PHP变量入门教程(1)基础

    基础 PHP 中一个美元符号后面跟上一个变量名称,即表示一个变量.变量的名称是对大小写敏感的. 变量名与 PHP 中其它的标签一样遵循相同的规则.一个有效的变量名由字母或者下划线开头,后面跟上任意数量 ...

  7. 笨办法学Python (exercise1-15)

    #exercise1print "Hello world!"print "Hello Again"print "I like typing this. ...

  8. C和指针 第九章 字符串 字符 字节

    C语言中没有字符串类型,字符串是以NUL结尾的字符数组组成的. 高级字符串查找: //计算字符串起始部分,有多少字符是在group中 size_t strspn(char const * str, c ...

  9. JDK source 之 ArrayList 需要注意事项

    线程安全 ArrayList内部没有实现原子性操作,所以是非线程安全的.如果需要在线程安全的环境下使用List的话,需要使用Vector 或者CopyOnWriteArrayList,具体场景,自行深 ...

  10. poj 1733

    这题离散化+并查集,没看出关dp什么事.(那他为什么放到dp里面) 用Si记录前i项的和.拆成两个点,i*2表示与第i个相同,i*2+1表示与第i个不同.用并查集判断.区间[a,b]就可以看成Sb-S ...