<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. NOSDK--项目历程

    nosdk是一个基于cocos2d-x的sdk自动打包及统一接入框架,项目地址:https://github.com/nottvlike/nosdk.git. --更新(2015.07.15) 添加u ...

  2. C/C++学习链接

    C/C++堆和栈的区别:http://blog.csdn.net/hairetz/article/details/4141043

  3. Servlet接口五种方法介绍

    Servlet接口定义了5种方法: init() service() destroy() getServletConfig() getServletInfo() init() 在Servlet实例化后 ...

  4. Ruby常用比较操作符

    操作符 含义 == 测试值是否相等 ==== 用来比较case语句的目标和每个when从句的项 <=>  通用比较操作符. 根据接受者小于, 等于, 大于其参数, 返回-1, 0. 1 & ...

  5. 【Android学习】《Android开发视频教程》第二季笔记(未完待续)

    视频地址: http://study.163.com/course/courseMain.htm?courseId=207001 课时22  Activity生命周期(一) 1.如何在一个应用中添加新 ...

  6. MySQL分库分表总结

    单库单表 单库单表是最常见的数据库设计,例如,有一张用户(user)表放在数据库db中,所有的用户都可以在db库中的user表中查到. 单库多表 随着用户数量的增加,user表的数据量会越来越大,当数 ...

  7. Java批量文件打包下载

    经常遇到选择多个文件进行批量下载的情况,可以先将选择的所有的文件生成一个zip文件,然后再下载,该zip文件,即可实现批量下载,但是在打包过程中,常常也会出现下载过来的zip文件中里面有乱码的文件名, ...

  8. stl vector erase

     C++ Code  12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...

  9. Bootstrap3 CSS样式基本用法总结

    按钮 a,input,button都可以设置为按钮 a标签按钮   button标签按钮 <a class="btn btn-default" href="#&qu ...

  10. ABAP BAPI 销售订单生产交货单函数

    TYPES: BEGIN OF ty_so,          vbeln LIKE  vbap-vbeln,          posnr LIKE  vbap-posnr,        END  ...