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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
js中常用的Math方法总结
Jan 12 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 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
session 的生命周期是多长
2006/10/09 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
Python字符串替换实例分析
2015/05/11 Python
python实现BackPropagation算法
2017/12/14 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
Django框架多表查询实例分析
2018/07/04 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
说出一些常用的类,包,接口
2014/09/22 面试题
实习护理工作自我评价
2013/09/25 职场文书
期末自我鉴定
2014/02/02 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
《社戏》教学反思
2014/04/15 职场文书
化工操作工岗位职责
2014/04/29 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang