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 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
vant中的toast轻提示实现代码
Nov 04 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和ACCESS写聊天室(三)
2006/10/09 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python合并多个excel文件的示例
2020/09/23 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
Java软件工程师综合面试题笔试题
2013/09/08 面试题
销售代表求职自荐信
2013/10/01 职场文书
经典优秀个人求职信分享
2013/12/12 职场文书
策划总监岗位职责
2014/02/16 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
CSS极坐标的实例代码
2021/06/03 HTML / CSS
python turtle绘图命令及案例
2021/11/23 Python