Example of proportional scaling of database images with php and js

Home

Web Front-end

JS Tutorial

Example of proportional scaling of database images with php and js_javascript skills

May 16, 2016 pm 04:50 PM

JS proportional scaling of an image

Code

Copy code The code is as follows:

 
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>Latest javascript Automatically display images proportionally and compress images proportionally</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 /> 
Original image display (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 /> ./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 , the image will not be enlarged and displayed (displayed according to the original image)<br /> 
The original image is 444 x 207, compressed to 500 x 600, and the original image will be displayed<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 />&lt ;br /> 
</body> 
</html> 

 

PHP proportional scaling of database images
 

Copy code

The code is as follows: <?php class ImgSF{

function make_img($img_address ){

//Constantial scaling of pictures

//Because PHP can only operate on resources, you need to copy the pictures that need to be scaled and create them as new resources
$src =imagecreatefromjpeg($img_address); 

//Get the width and height of the source image
$size_src=getimagesize($img_address); 
$w=$size_src['0']; 
$h=$size_src['1']; 

//Specify the maximum width (maybe height) of scaling 
$max=300; 

//According to The maximum value is 300, calculate the length of the other side, and get the scaled image width and height 
if($w > $h){ 
$w=$max; 
$h=$h *($max/$size_src['0']); 
}else{ 
$h=$max; 
$w=$w*($max/$size_src['1']) ; 
} 


//Declare a true color image resource of $w width and $h height
$image=imagecreatetruecolor($w, $h); 


//Key function, parameters (target resource, source, starting coordinates x,y of the target resource, starting coordinates x,y of the source resource, width and height w,h of the target resource, width and height w of the source resource, h) 
imagecopyresampled($image, $src, 0, 0, 0, 0, $w, $h, $size_src['0'], $size_src['1']); 

 //Tell the browser to parse 
header('content-type:image/png'); 
imagepng($image); 

//Destroy resources
imagedestroy($ image); 
} 
} 
$obj=new ImgSF(); 
$obj->make_img("./img/IMG_20140424_200722.jpg"); 

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn