请教，可不可以将上传的图片设置成自动缩小啊
10 篇帖子
• 分页： 1 / 1
Re: 请教，可不可以将上传的图片设置成自动缩小啊
楼层:#3 
由 xiaolu » 14 1月 2014 06:32
说实话, 我一直在考虑搞个MOD来自动缩小上传图, 但一直尚未内搞定, 需要在 SERVER SIDE 缩小,...,我再研究研究, 烟酒烟酒...呵呵.
Re: 请教，可不可以将上传的图片设置成自动缩小啊
楼层:#5 由 xiaolu » 14 1月 2014 06:42
wenxiuxuan 写道:Upload之前缩小效果是不是更好，也快。
是啊, 在 UPLOAD之前缩小是常用方法, 但这是用户端的, 而不是论坛的 SERVER 上的...
Re: 请教，可不可以将上传的图片设置成自动缩小啊
楼层:#6 由 wenxiuxuan » 14 1月 2014 06:45
xiaolu 写道:wenxiuxuan 写道:Upload之前缩小效果是不是更好，也快。
是啊, 在 UPLOAD之前缩小是常用方法, 但这是用户端的, 而不是论坛的 SERVER 上的...
你用Ajax发送文件给Server之前处理不行吗？
- wenxiuxuan
- General (上将)
- 帖子: 10048
- 注册: 17 9月 2013 08:03
- Member Number (论坛会员注册序列号): #3
- 地址: Richmond Hill
Re: 请教，可不可以将上传的图片设置成自动缩小啊
楼层:#7 由 xiaolu » 14 1月 2014 07:12
wenxiuxuan 写道:xiaolu 写道:wenxiuxuan 写道:Upload之前缩小效果是不是更好，也快。
是啊, 在 UPLOAD之前缩小是常用方法, 但这是用户端的, 而不是论坛的 SERVER 上的...
你用Ajax发送文件给Server之前处理不行吗？
不清楚如何弄啊....
Re: 请教，可不可以将上传的图片设置成自动缩小啊
楼层:#8 由 wenxiuxuan » 14 1月 2014 09:52
Try this code.
<?php
// The file
$filename = 'test.jpg';
// Set a maximum height and width
$width = 200;
$height = 200;
// Content type
header('Content-Type: image/jpeg');
// Get new dimensions
list($width_orig, $height_orig) = getimagesize($filename);
$ratio_orig = $width_orig/$height_orig;
if ($width/$height > $ratio_orig) {
$width = $height*$ratio_orig;
} else {
$height = $width/$ratio_orig;
}
// Resample
$image_p = imagecreatetruecolor($width, $height);
$image = imagecreatefromjpeg($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);
// Output
imagejpeg($image_p, null, 100);
?>
<?php
// The file
$filename = 'test.jpg';
// Set a maximum height and width
$width = 200;
$height = 200;
// Content type
header('Content-Type: image/jpeg');
// Get new dimensions
list($width_orig, $height_orig) = getimagesize($filename);
$ratio_orig = $width_orig/$height_orig;
if ($width/$height > $ratio_orig) {
$width = $height*$ratio_orig;
} else {
$height = $width/$ratio_orig;
}
// Resample
$image_p = imagecreatetruecolor($width, $height);
$image = imagecreatefromjpeg($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);
// Output
imagejpeg($image_p, null, 100);
?>
- wenxiuxuan
- General (上将)
- 帖子: 10048
- 注册: 17 9月 2013 08:03
- Member Number (论坛会员注册序列号): #3
- 地址: Richmond Hill
Re: 请教，可不可以将上传的图片设置成自动缩小啊
楼层:#9 由 wenxiuxuan » 14 1月 2014 10:07
or using JS
oFReader.onload = function (oFREvent) {
var img=new Image();
img.onload=function(){
document.getElementById("originalImg").src=img.src;
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
canvas.width=img.width/2;
canvas.height=img.height/2;
ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
document.getElementById("uploadPreview").src = canvas.toDataURL();
}
img.src=oFREvent.target.result;
};
function loadImageFile() {
if (document.getElementById("uploadImage").files.length === 0) { return; }
var oFile = document.getElementById("uploadImage").files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}
</script>
</head>
<body onload="loadImageFile();">
<form name="uploadForm">
<table>
<tbody>
<tr>
<td><img id="originalImg"/></td>
<td><img id="uploadPreview"/></td>
<td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
oFReader.onload = function (oFREvent) {
var img=new Image();
img.onload=function(){
document.getElementById("originalImg").src=img.src;
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
canvas.width=img.width/2;
canvas.height=img.height/2;
ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
document.getElementById("uploadPreview").src = canvas.toDataURL();
}
img.src=oFREvent.target.result;
};
function loadImageFile() {
if (document.getElementById("uploadImage").files.length === 0) { return; }
var oFile = document.getElementById("uploadImage").files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}
</script>
</head>
<body onload="loadImageFile();">
<form name="uploadForm">
<table>
<tbody>
<tr>
<td><img id="originalImg"/></td>
<td><img id="uploadPreview"/></td>
<td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
- wenxiuxuan
- General (上将)
- 帖子: 10048
- 注册: 17 9月 2013 08:03
- Member Number (论坛会员注册序列号): #3
- 地址: Richmond Hill
10 篇帖子
• 分页： 1 / 1