JS创建缩略图
<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创建缩略图的更多相关文章
- JavaScript with Image:创建缩略图
当图片很大,直接把图片从Server下载到浏览器上看是一种很不明智的做法,浪费了服务器的资源,网络带宽和客户端的资源.所以,通常Server和Client之间会传输缩略图,只有当Client请求某张图 ...
- 使用 Amazon S3 触发器创建缩略图
使用 Amazon S3 触发器创建缩略图 环境 centos (注意,必须是Linux环境) node12.x 安装教程 curl -sL https://rpm.nodesource.com/se ...
- PHP 创建缩略图
一.成比例缩小图像 <?php /* 创建缩略图 */ $file = __DIR__.'/button.png'; $scale = 0.5; // 比例 $image = ImageCrea ...
- 用Backbone.js创建一个联系人管理系统(五)
原文: Build a Contacts Manager Using Backbone.js: Part 5 这是这系列教程最后一部分了. 之前所有的增删改都在前端完成. 这部分我们要把Contact ...
- 使用 iosOverlay.js 创建 iOS 风格的提示和通知
iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...
- Dynamics.js - 创建逼真的物理动画的 JS 库
Dynamics.js 是一个用来创建物理动画 JavaScript 库.你只需要把dynamics.js引入你的页面,然后就可以激活任何 DOM 元素的 CSS 属性动画,也可以用户 SVG 属性. ...
- 使用three.js创建3D机房模型-分享一
序:前段时间公司一次研讨会上,一市场部同事展现了同行业其他公司的3D机房,我司领导觉得这个可以研究研究,为了节约成本,我们在网上大量检索,最后找到一位前辈的博文[TWaver的技术博客],在那篇博文的 ...
- Node.js 创建HTTP服务器
Node.js 创建HTTP服务器 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi. 从这个角度看,整个& ...
- 用Backbone.js创建一个联系人管理系统(一)
原文 Build a Contacts Manager Using Backbone.js: Part 1 在这个教程里我们将会使用Backbone.js,Underscore.js,JQuery创建 ...
随机推荐
- 【转】4G内存下MySQL修改配置文件以优化效率(来自discuz)
摘要:公司网站访问量越来越大,MySQL自然成为瓶颈,因此最近我一直在研究 MySQL 的优化,第一步自然想到的是 MySQL 系统参数的优化,作为一个访问量很大的网站(日20万人次以上)的数据库. ...
- H5案例分享:移动端滑屏 touch事件
移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
- jquery版相片墙(鼠标控制图片聚合和散开)
照片墙,简单点说就是鼠标点击小图片时,聚合变成一张大图片:点击大图片时,散开变成小图片.这个是我一年前无意间看到的动画效果(现在已经忘记是哪位大神制作的了,引用了他的图片),刚看到这个很炫的动画超级激 ...
- IEnumerable和IEnumerable<T>接口
IEnumerable和IEnumerable<T>接口 IEnumerable和IEnumerable<T>接口在.NET中是非常重要的接口,它允许开发人员定义foreach ...
- PHP 面向对象
封装与不封装的区别: 未封装 时 外部随意更改数据 数据 不需要判定 就可以执行 外部直接操作数据 封装: 外部同样可以对数据更改,但需要 调用 类里面的 函数 外部间接操作数据 ...
- 用Myeclipse,包名上有小红叉(表示错误),但是包中的类都是没有错误的+struts2继承ActionSupport时package前面出错
使用Eclipse 进行项目开发,在实现类中的方法前面如果添加@Override就提示“Multiple markers at this line”的错误,问题描述如下 应该是JDK版本的问题, 右击 ...
- 利用Photos 框架搭建美图秀秀相册选择器
简介:Photos框架是iOS8.0后推出的一个新的用于对系统相册进行相关操作的,在iOS8.0之前,开发中只能使用AssetsLibrary框架来访问移动设备的图片库.本文中不再对AssetsLib ...
- SQL入门语句之INSERT、UPDATE和DELETE
一.SQL入门语句之INSERT insert语句的功能是向数据库的某个表中插入一个新的数据行 1.根据对应的字段插入相对应的值 insert into table_name(字段A, 字段B, 字段 ...
- xcode 常见错误报错问题!
1:module file '/Users/shaka/Library/Developer/Xcode/DerivedData/ModuleCache/92IKIZLYISUT/Darwin-2OA ...
- 【JavaScript中的正则表达式】
原文地址:http://blog.csdn.net/xh16319/article/details/9987847 1. 正则表达式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有 ...