当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

js图片不变形缩略图

发表于: 2012-11-27   作者:商人shang   来源:转载   浏览:
摘要: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>js图片不变形缩略图</title>
<script>
/** 检测图像属性 */
function CheckProperty(obj) {
var ImgObj=new Image();
ImgObj.src = obj.src;
FileObj=ImgObj;
/*
if(ImgObj.readyState!="complete") //如果图像是未加载完成进行循环检测
{
   setTimeout("CheckProperty(FileObj)",500);
}

ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小
*/
//取得图片的宽度
ImgWidth=ImgObj.width
//取得图片的高度
ImgHeight=ImgObj.height;
cut(obj , ImgWidth , ImgHeight);
setCenter(obj);
}
/** 设置图片层的上一层居中 */
function setCenter(obj){
if(navigator.userAgent.indexOf("MSIE") <= 0){
   obj.parentNode.style.display = 'table-cell';
} else {
   obj.parentNode.style.display = 'block';
   obj.parentNode.style.fontSize = obj.parentNode.height*0.873;
   obj.parentNode.style.fontFamily = 'Arial';
}
obj.parentNode.style.verticalAlign = 'middle';
obj.parentNode.style.textAlign   = 'center';
}
/** 裁剪图片 */
function cut(obj , width , height){
if(obj.width > obj.height) {
   obj.width = width*obj.height/height;
} else {
   obj.height = height*obj.width/width;
}
}
</script>
</head>
<body>
<div height="500" style="width:500px;height:500px;border: 3px solid #eee;">
<img src='1.jpg' onload='CheckProperty(this)' width='400' height='300'></div>
</body>
</html>
 

摘自:http://hi.baidu.com/yujuan260/item/41966612ca1907061994ec38

js图片不变形缩略图

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
在Android SDK中的Tools文件夹中有一个draw9patch.bat程序。 打开后如图: 将在PS中绘制好的按钮图
using System; using System.Collections.Generic; using System.ComponentModel; using System.Dat
在线效果体验:http://hovertree.com/texiao/mobile/3.htm 请使用手机浏览器查看。 css代码: .bg{
最近项目有部分需求,是关于图片操作部分的, 大致的功能就是图片的保存和展示。但是直接操作原图
最近项目有部分需求,是关于图片操作部分的, 大致的功能就是图片的保存和展示。但是直接操作原图
在intellij中的preview如下图(可以看到,没有锯齿): XML文件中的代码如下: <Button android:
在线演示地址(打开网页后,点击商家图册): http://www.sport7.cn/cc/jiangnan/football5.html 先
前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是
  最近在自学Android,尝试实现一般手机上都存在的图片浏览器,从缩略图开始。   直接上图,这
java压缩图片 生成缩略图 package com.util; import java.awt.Image; import java.awt.image.Buffer
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号