php和js对数据库图片进行等比缩放示例


Posted in Javascript onApril 28, 2014

JS 对某图片的等比缩放

代码

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!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=utf-8" /> 
<title>最新javascript自动按比例显示图片,按比例压缩图片显示</title> 
<script type="text/javascript"> 
function AutoResizeImage(maxWidth,maxHeight,objImg){ 
var img = new Image(); 
img.src = objImg.src; 
var hRatio; 
var wRatio; 
var Ratio = 1; 
var w = img.width; 
var h = img.height; 
wRatio = maxWidth / w; 
hRatio = maxHeight / h; 
if (maxWidth ==0 && maxHeight==0){ 
Ratio = 1; 
}else if (maxWidth==0){// 
if (hRatio<1) Ratio = hRatio; 
}else if (maxHeight==0){ 
if (wRatio<1) Ratio = wRatio; 
}else if (wRatio<1 || hRatio<1){ 
Ratio = (wRatio<=hRatio?wRatio:hRatio); 
} 
if (Ratio<1){ 
w = w * Ratio; 
h = h * Ratio; 
} 
objImg.height = h; 
objImg.width = w; 
} 
</script> 
</head> 
<body> 
<br /> 
原图显示(534 X 800)<br /> 
onload="AutoResizeImage(0,0,this)<br /> 
<a href="./img/IMG_20140424_200722.jpg" target="_blank"><img src="./img/IMG_20140424_200722.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="534 X 800"/></a><br/><br /> 
3.按高度250宽度250 按比例压缩<br /> 
onload="AutoResizeImage(250,250,this)"<br /> 
<a href="./img/IMG_20140424_200722.jpg" target="_blank"><img src="./img/IMG_20140424_200722.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)" alt="200 X 300"/></a><br /><br /> 
6.如果图片本来的高度和宽度小于压缩的最大高度和宽度,则不会拉大显示图片(按原图显示)<br /> 
原图444 x 207,压缩为 500 x 600,将保持原图显示<br /> 
onload="AutoResizeImage(500,600,this)"<br /> 
<a href="./img/IMG_20140424_200722.jpg" target="_blank"><img src="./img/IMG_20140424_200722.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)" alt="444 X 207"/></a><br /><br /> 
</body> 
</html>

php对数据库图片的等比缩放
<?php 
class ImgSF{ 
function make_img($img_address){ 
//图片的等比缩放 //因为PHP只能对资源进行操作,所以要对需要进行缩放的图片进行拷贝,创建为新的资源 
$src=imagecreatefromjpeg($img_address); 
//取得源图片的宽度和高度 
$size_src=getimagesize($img_address); 
$w=$size_src['0']; 
$h=$size_src['1']; 
//指定缩放出来的最大的宽度(也有可能是高度) 
$max=300; 
//根据最大值为300,算出另一个边的长度,得到缩放后的图片宽度和高度 
if($w > $h){ 
$w=$max; 
$h=$h*($max/$size_src['0']); 
}else{ 
$h=$max; 
$w=$w*($max/$size_src['1']); 
} 

//声明一个$w宽,$h高的真彩图片资源 
$image=imagecreatetruecolor($w, $h); 

//关键函数,参数(目标资源,源,目标资源的开始坐标x,y, 源资源的开始坐标x,y,目标资源的宽高w,h,源资源的宽高w,h) 
imagecopyresampled($image, $src, 0, 0, 0, 0, $w, $h, $size_src['0'], $size_src['1']); 
//告诉浏览器以图片形式解析 
header('content-type:image/png'); 
imagepng($image); 
//销毁资源 
imagedestroy($image); 
} 
} 
$obj=new ImgSF(); 
$obj->make_img("./img/IMG_20140424_200722.jpg");
Javascript 相关文章推荐
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
JS计算网页停留时间代码
Apr 28 #Javascript
js分页代码分享
Apr 28 #Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 #Javascript
jquery禁用右键示例
Apr 28 #Javascript
jquery实现带二级菜单的导航示例
Apr 28 #Javascript
jquery实现的导航固定效果
Apr 28 #Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 #Javascript
You might like
php中的数组操作函数整理
2008/08/18 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
一个PHP分页类的代码
2011/05/18 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
Python中逗号的三种作用实例分析
2015/06/08 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
运动会致辞稿50字
2014/02/04 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
售房协议书范本
2015/08/11 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python