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

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");

时间: 2024-12-20 18:09:03

php和js对数据库图片进行等比缩放示例_javascript技巧的相关文章

JS实现简易图片轮播效果的方法_javascript技巧

本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char

js实现双击图片放大单击缩小的方法_javascript技巧

本文实例讲述了js实现双击图片放大单击缩小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>双击图片放大,单击缩小</title> </head> <body> <SCRIPT

js实现背景图片感应鼠标变化的方法_javascript技巧

本文实例讲述了js实现背景图片感应鼠标变化的方法.分享给大家供大家参考.具体分析如下: 鼠标点击后背景图片变化,点击另外一个菜单项前面的会自动恢复背景,其实这个如果单纯使用CSS是没办法做的,我们还要使用JS来判断鼠标状态,代码如下: <style type="text/css"> .dh a{ background:#FFFFCC; width:50px; height:30px; display:block; text-align:center; color:#0000

原生js实现移动端瀑布流式代码示例_javascript技巧

瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.最近使用到了"懒加载",现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js .当然也可以和jQuery 通用. 代码如下: function loadImgLazy(node) { var lazyNode = $('[node-type=imglazy]', node), mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTo

用js闭包的方法实现多点标注冒泡示例_javascript技巧

这两天在做地图这块,一点点js代码,各种坑.第一次接触js,各种难,下面就这几天的研究做一些总结,求坑 在事件监听器中使用闭包 在执行事件监听器时,通常可取的做法是将私有数据和持久性数据附加到对象中.JavaScript 不支持"私有"实例数据,但是支持允许内部函数访问外部变量的闭包.在事件监听器中,闭包非常适用于访问通常不附加到发生事件的对象的变量. 以下示例在事件监听器中使用了函数闭包将加密讯息分配给一组标记.点击每个标记将会看到加密讯息的一部分,该讯息并不包含在标记本身内. 复制

js简单的表格添加行和删除行操作示例_javascript技巧

复制代码 代码如下: <html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> //创建一个html元素 function $c(tagname){ return document.createElement(tagname); } //文档加载完成后要执行的内容 $(document).ready(fu

js 与 php 通过json数据进行通讯示例_javascript技巧

js 与 php 通过json数据进行通讯 例子: php文件 复制代码 代码如下: <?php echo json_encode(array(array( 'liaotiantiao'=>$liaotiantiao, 'liaotiank'=>$liaotiank, 'chatuserid'=>$chatuserid, 'chattouserid'=>$chattouserid ))); ?> html 文件 复制代码 代码如下: $(document).ready(

js基于cookie方式记住返回页面用法示例_javascript技巧

本文实例讲述了js基于cookie方式记住返回页面的用法.分享给大家供大家参考,具体如下: 首先明确以下概念 ①. 同名的 cookie,不同的 domain 或不同的 path,属不同的 cookie: 同名的 cookie,相同的 domain 且相同的 path,不同的 expires,属同一个 cookie. ②. 不加过期时间的cookie在浏览器关闭后失效 ③ 二级域名cookie可以生效,通过指定domain 于是在js端 document.cookie="back_url=&qu

JS弹出窗口插件zDialog简单用法示例_javascript技巧

本文实例讲述了JS弹出窗口插件zDialog简单用法.分享给大家供大家参考,具体如下: 因为没有元素可以显示到Frameset上面去,所以重新定义了,一个index.htm,对其的操作是: Index.htm <script language="javascript" src="JS/zDialog/zDialog.js" type="text/javascript"></script> <script langua