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 相关文章推荐
ASP.NET中AJAX 调用实例代码
May 03 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
原生JavaScript实现随机点名表
Jan 14 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 visitFile()遍历指定文件夹函数
2010/08/21 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
js确定对象类型方法
2012/03/30 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
python sort、sorted高级排序技巧
2014/11/21 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Django时区详解
2019/07/24 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
python学生信息管理系统实现代码
2019/12/17 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
宿舍使用违章电器检讨书
2014/01/12 职场文书
家长对老师的感言
2014/03/11 职场文书
买房协议书
2014/04/11 职场文书
岗位说明书范文
2014/05/07 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
实习单位证明范例
2014/11/17 职场文书
客房服务员岗位职责
2015/02/09 职场文书
大学生党员个人总结
2015/02/13 职场文书
户外亲子活动总结
2015/05/08 职场文书
小学体育组工作总结
2015/08/13 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL