feature:2274

Create thumbnail through ajax.
Remove $conf['tn_width'], $conf['tn_height'] and $conf['tn_compression_level'] parameters.

git-svn-id: http://piwigo.org/svn/trunk@10570 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
patdenice 2011-04-22 13:19:36 +00:00
parent 041fc62aa1
commit a3963aedef
5 changed files with 190 additions and 382 deletions

View file

@ -604,7 +604,7 @@ function pwg_image_resize_gd($source_filepath, $destination_filepath, $max_width
{
// the image doesn't need any resize! We just copy it to the destination
copy($source_filepath, $destination_filepath);
return true;
return get_resize_result($source_filepath, $destination_filepath, $resize_dimensions['width'], $resize_dimensions['height'], $starttime, 'GD');
}
$destination_image = imagecreatetruecolor($resize_dimensions['width'], $resize_dimensions['height']);
@ -646,15 +646,7 @@ function pwg_image_resize_gd($source_filepath, $destination_filepath, $max_width
imagedestroy($destination_image);
// everything should be OK if we are here!
return array(
'source' => $source_filepath,
'destination' => $destination_filepath,
'width' => $resize_dimensions['width'],
'height' => $resize_dimensions['height'],
'size' => floor(filesize($destination_filepath) / 1024).' KB',
'time' => number_format((get_moment() - $starttime) * 1000, 2, '.', ' ').' ms',
'library' => 'GD',
);
return get_resize_result($source_filepath, $destination_filepath, $resize_dimensions['width'], $resize_dimensions['height'], $starttime, 'GD');
}
function pwg_image_resize_im($source_filepath, $destination_filepath, $max_width, $max_height, $quality, $strip_metadata=false, $crop=false, $follow_orientation=true)
@ -691,7 +683,7 @@ function pwg_image_resize_im($source_filepath, $destination_filepath, $max_width
{
// the image doesn't need any resize! We just copy it to the destination
copy($source_filepath, $destination_filepath);
return true;
get_resize_result($source_filepath, $destination_filepath, $resize_dimensions['width'], $resize_dimensions['height'], $starttime, 'ImageMagick');
}
$image->setImageCompressionQuality($quality);
@ -716,15 +708,7 @@ function pwg_image_resize_im($source_filepath, $destination_filepath, $max_width
$image->destroy();
// everything should be OK if we are here!
return array(
'source' => $source_filepath,
'destination' => $destination_filepath,
'width' => $resize_dimensions['width'],
'height' => $resize_dimensions['height'],
'size' => floor(filesize($destination_filepath) / 1024).' KB',
'time' => number_format((get_moment() - $starttime) * 1000, 2, '.', ' ').' ms',
'library' => 'ImageMagick',
);
return get_resize_result($source_filepath, $destination_filepath, $resize_dimensions['width'], $resize_dimensions['height'], $starttime, 'ImageMagick');
}
function get_rotation_angle($source_filepath)
@ -966,4 +950,17 @@ function file_path_for_type($file_path, $type='thumb')
return $file_path;
}
function get_resize_result($source_filepath, $destination_filepath, $width, $height, $time, $library)
{
return array(
'source' => $source_filepath,
'destination' => $destination_filepath,
'width' => $width,
'height' => $height,
'size' => floor(filesize($destination_filepath) / 1024).' KB',
'time' => number_format((get_moment() - $time) * 1000, 2, '.', ' ').' ms',
'library' => $library,
);
}
?>

Binary file not shown.

After

Width:  |  Height:  |  Size: 673 B

View file

@ -1,116 +1,165 @@
{combine_script id='jquery.ajaxmanager' load='footer' path='themes/default/js/plugins/jquery.ajaxmanager.js'}
{footer_script}
var width_str = '{'Width'|@translate}';
var height_str = '{'Height'|@translate}';
var max_width_str = '{'Maximum Width'|@translate}';
var max_height_str = '{'Maximum Height'|@translate}';
var remaining = '{'photos without thumbnail (jpeg and png only)'|@translate}';
var todo = {$TOTAL_NB_REMAINING};
var done = 0;
{literal}
var queuedManager = $.manageAjax.create('queued', {
queue: true,
cacheResponse: false,
maxRequests: 3,
complete: function() {
jQuery("#thumb_remaining").text(todo-(++done) + ' ' + remaining);
if (todo == done) {
jQuery('.waiting_bar, #thumb_remaining, .properties').hide();
}
}
});
function processThumbs(width,height,crop,follow_orientation) {
jQuery('tr.nothumb').each(function() {
var image_path = jQuery(this).find('td.filepath').text();
var td=this;
queuedManager.add({
type: 'GET',
url: 'ws.php',
data: {
method: 'pwg.images.resize',
image_path: image_path,
type: 'thumbnail',
maxwidth: width,
maxheight: height,
crop: crop,
follow_orientation: follow_orientation,
format:'json'
},
dataType: 'json',
success: (function(row) { return function(data) {
if (data.stat =='ok') {
if (todo < 200)
jQuery(row).find('td.thumbpic').html('<img src="'+data.result.destination+'"/>');
jQuery(row).find('td.thumbdim').html(""+data.result.width+" x "+data.result.height);
jQuery(row).find('td.thumbgentime').html(""+data.result.time);
jQuery(row).find('td.thumbsize').html(""+data.result.size);
jQuery(row).removeClass("nothumb");
} else {
jQuery(row).find('td.thumbpic').html('#ERR#'+data.err+"# : "+data.message);
jQuery(row).removeClass("nothumb");
jQuery(row).addClass("error");
}
}
})(td)
});
});
}
function toggleCropFields() {
if (jQuery("#thumb_crop").is(':checked')) {
jQuery("label[for='thumb_maxwidth']").text(width_str);
jQuery("label[for='thumb_maxheight']").text(height_str);
jQuery("#thumb_follow_orientation_li").show();
}
else {
jQuery("label[for='thumb_maxwidth']").text(max_width_str);
jQuery("label[for='thumb_maxheight']").text(max_height_str);
jQuery("#thumb_follow_orientation_li").hide();
}
}
jQuery(document).ready(function(){
jQuery('input#proceed').click (function () {
var width = jQuery('input[name="thumb_maxwidth"]').val();
var height = jQuery('input[name="thumb_maxheight"]').val();
var crop = jQuery('#crop').is(':checked');
var follow_orientation = jQuery('#follow_orientation').is(':checked');
jQuery(".waiting_bar").toggle();
if (todo < 200)
jQuery('.thumbpic').show();
jQuery('.thumbgentime, .thumbsize, .thumbdim').show();
processThumbs(width,height,crop,follow_orientation);
});
jQuery('input#cancel').click (function () {
queuedManager.clear();
queuedManager.abort();
jQuery("input:not(.nodisable)").attr("disabled",false);
jQuery('tr.nothumb td.thumbpic').html("&nbsp;");
});
toggleCropFields();
jQuery("#thumb_crop").click(function () {toggleCropFields()});
jQuery('.thumbpic, .thumbgentime, .thumbsize, .thumbdim').hide();
});
{/literal}{/footer_script}
<div class="titrePage">
<h2>{'Thumbnail creation'|@translate}</h2>
</div>
{if isset($results) }
<div class="admin">{'Results of miniaturization'|@translate}</div>
<table style="width:100%;">
<tr class="throw">
<td>{'Path'|@translate}</td>
<td>{'Thumbnail'|@translate}</td>
<td>{'generated in'|@translate}</td>
<td>{'Filesize'|@translate}</td>
<td>{'Dimensions'|@translate}</td>
</tr>
{foreach from=$results.elements item=elt}
<tr>
<td>{$elt.PATH}</td>
<td><img src="{$elt.TN_FILE_IMG}"></td>
<td style="text-align:right;">{$elt.GEN_TIME}</td>
<td style="text-align:right;">{$elt.TN_FILESIZE_IMG}</td>
<td style="text-align:right;">{$elt.TN_WIDTH_IMG} x {$elt.TN_HEIGHT_IMG}</td>
</tr>
{/foreach}
</table>
<table class="table2">
<tr class="throw">
<td colspan="2">{'General statistics'|@translate}</td>
</tr>
<tr>
<td>{'number of miniaturized photos'|@translate}</td>
<td style="text-align:center;">{$results.TN_NB}</td>
</tr>
<tr>
<td>{'total time'|@translate}</td>
<td style="text-align:right;">{$results.TN_TOTAL}</td>
</tr>
<tr>
<td>{'max time'|@translate}</td>
<td style="text-align:right;">{$results.TN_MAX}</td>
</tr>
<tr>
<td>{'min time'|@translate}</td>
<td style="text-align:right;">{$results.TN_MIN}</td>
</tr>
<tr>
<td>{'average time'|@translate}</td>
<td style="text-align:right;">{$results.TN_AVERAGE}</td>
</tr>
</table>
<br>
{/if}
{if isset($params) }
{if !empty($remainings) }
<form method="post" action="{$params.F_ACTION}" class="properties">
<fieldset>
<legend>{'Miniaturization parameters'|@translate}</legend>
<legend>{'Thumbnail creation'|@translate}</legend>
<ul>
<li>
<span class="property">{'GD version'|@translate}</span>
<label>
<input type="radio" name="gd" value="2" {if $params.GD_SELECTED==2}checked="checked"{/if}>2.x
</label>
<label>
<input type="radio" name="gd" value="1" {if $params.GD_SELECTED==1}checked="checked"{/if}>1.x
</label>
<span class="property"><label for="thumb_crop">{'Crop'|@translate}</label></span>
<input type="checkbox" name="thumb_crop" id="thumb_crop" {$values.thumb_crop}>
</li>
<li>
<span class="property">
<label for="width">{'maximum width'|@translate}</label>
</span>
<input type="text" id="width" name="width" value="{$params.WIDTH_TN}">
<li id="thumb_follow_orientation_li">
<span class="property"><label for="thumb_follow_orientation">{'Follow Orientation'|@translate}</label></span>
<input type="checkbox" name="thumb_follow_orientation" id="thumb_follow_orientation" {$values.thumb_follow_orientation}>
</li>
<li>
<span class="property">
<label for="height">{'maximum height'|@translate}</label>
</span>
<input type="text" id="height" name="height" value="{$params.HEIGHT_TN}">
<span class="property"><label for="thumb_maxwidth">{'Maximum Width'|@translate}</label></span>
<input type="text" name="thumb_maxwidth" id="thumb_maxwidth" value="{$values.thumb_maxwidth}" size="4" maxlength="4"> {'pixels'|@translate}
</li>
<li>
<span class="property">{'Number of thumbnails to create'|@translate}</span>
<label><input type="radio" name="n" value="5" {if $params.N_SELECTED==5}checked="checked"{/if}> 5</label>
<label><input type="radio" name="n" value="10" {if $params.N_SELECTED==10}checked="checked"{/if}> 10</label>
<label><input type="radio" name="n" value="20" {if $params.N_SELECTED==20}checked="checked"{/if}> 20</label>
<label><input type="radio" name="n" value="all" {if $params.N_SELECTED=='all'}checked="checked"{/if}> {'all'|@translate}</label>
<span class="property"><label for="thumb_maxheight">{'Maximum Height'|@translate}</label></span>
<input type="text" name="thumb_maxheight" id="thumb_maxheight" value="{$values.thumb_maxheight}" size="4" maxlength="4"> {'pixels'|@translate}
</li>
<li>
<span class="property"><label for="thumb_quality">{'Image Quality'|@translate}</label></span>
<input type="text" name="thumb_quality" id="thumb_quality" value="{$values.thumb_quality}" size="3" maxlength="3"> %
</li>
</ul>
</fieldset>
<p><input class="submit" type="submit" name="submit" value="{'Submit'|@translate}"></p>
<p class="waiting_bar"><input type="button" name="submit" id="proceed" value="{'Submit'|@translate}"></p>
<p class="waiting_bar" style="display:none;">{'Please wait...'|@translate}<br><img src="admin/themes/default/images/ajax-loader-bar.gif"></p>
</form>
{/if} {*isset params*}
{if !empty($remainings) }
<div class="admin">{$TOTAL_NB_REMAINING} {'photos without thumbnail (jpeg and png only)'|@translate}</div>
<div class="admin"><span id="thumb_remaining">{$TOTAL_NB_REMAINING} {'photos without thumbnail (jpeg and png only)'|@translate}</span></div>
<table style="width:100%;">
<tr class="throw">
<td>&nbsp;</td>
<td style="width:60%;">{'Path'|@translate}</td>
<td>{'Filesize'|@translate}</td>
<td>{'Dimensions'|@translate}</td>
<th>&nbsp;</th>
<th style="width:60%;">{'Path'|@translate}</th>
<th>{'Filesize'|@translate}</th>
<th>{'Dimensions'|@translate}</th>
<th class="thumbpic">{'Thumbnail'|@translate}</th>
<th class="thumbgentime">{'generated in'|@translate}</th>
<th class="thumbsize">{'Filesize'|@translate}</th>
<th class="thumbdim">{'Dimensions'|@translate}</th>
</tr>
{foreach from=$remainings item=elt name=remain_loop}
<tr class="{if $smarty.foreach.remain_loop.index is odd}row1{else}row2{/if}">
<tr class="{if $smarty.foreach.remain_loop.index is odd}row1{else}row2{/if} nothumb item" id="th_{$smarty.foreach.remain_loop.iteration}">
<td>{$smarty.foreach.remain_loop.iteration}</td>
<td><div style="margin-left:10px;">{$elt.PATH}</div></td>
<td><div style="margin-left:10px;">{$elt.FILESIZE_IMG}</div></td>
<td><div style="margin-left:10px;">{$elt.WIDTH_IMG} x {$elt.HEIGHT_IMG}</div></td>
<td class="filepath">{$elt.PATH}</td>
<td>{$elt.FILESIZE_IMG}</td>
<td>{$elt.WIDTH_IMG} x {$elt.HEIGHT_IMG}</td>
<td class="thumbpic"><img src="admin/themes/default/images/ajax-loader.gif"></td>
<td class="thumbgentime">&nbsp;</td>
<td class="thumbsize">&nbsp;</td>
<td class="thumbdim">&nbsp;</td>
</tr>
{/foreach}
</table>

View file

@ -22,163 +22,29 @@
// +-----------------------------------------------------------------------+
include_once(PHPWG_ROOT_PATH.'admin/include/functions.php');
include_once(PHPWG_ROOT_PATH.'admin/include/functions_upload.inc.php');
// +-----------------------------------------------------------------------+
// | Check Access and exit when user status is not ok |
// +-----------------------------------------------------------------------+
check_status(ACCESS_ADMINISTRATOR);
//------------------------------------------------------------------- functions
// RatioResizeImg creates a new picture (a thumbnail since it is supposed to
// be smaller than original picture !) in the sub directory named
// "thumbnail".
function RatioResizeImg($info, $path, $newWidth, $newHeight, $tn_ext)
// +-----------------------------------------------------------------------+
// | Load configuration |
// +-----------------------------------------------------------------------+
prepare_upload_configuration();
$upload_form_config = get_upload_form_config();
$form_values = array();
foreach ($upload_form_config as $param_shortname => $param)
{
global $conf, $lang, $page;
if ($info !== false)
{
//someone hooked us - so we skip
return $info;
}
if (!function_exists('gd_info'))
{
return;
}
$filename = basename($path);
$dirname = dirname($path);
// extension of the picture filename
$extension = get_extension($filename);
if (in_array($extension, array('jpg', 'JPG', 'jpeg', 'JPEG')))
{
$srcImage = @imagecreatefromjpeg($path);
}
else if ($extension == 'png' or $extension == 'PNG')
{
$srcImage = @imagecreatefrompng($path);
}
else
{
unset($extension);
}
if ( isset( $srcImage ) )
{
// width/height
$srcWidth = imagesx( $srcImage );
$srcHeight = imagesy( $srcImage );
$ratioWidth = $srcWidth/$newWidth;
$ratioHeight = $srcHeight/$newHeight;
// maximal size exceeded ?
if ( ( $ratioWidth > 1 ) or ( $ratioHeight > 1 ) )
{
if ( $ratioWidth < $ratioHeight)
{
$destWidth = $srcWidth/$ratioHeight;
$destHeight = $newHeight;
}
else
{
$destWidth = $newWidth;
$destHeight = $srcHeight/$ratioWidth;
}
}
else
{
$destWidth = $srcWidth;
$destHeight = $srcHeight;
}
// according to the GD version installed on the server
if ( $_POST['gd'] == 2 )
{
// GD 2.0 or more recent -> good results (but slower)
$destImage = imagecreatetruecolor( $destWidth, $destHeight);
imagecopyresampled( $destImage, $srcImage, 0, 0, 0, 0,
$destWidth,$destHeight,$srcWidth,$srcHeight );
}
else
{
// GD prior to version 2 -> pretty bad results :-/ (but fast)
$destImage = imagecreate( $destWidth, $destHeight);
imagecopyresized( $destImage, $srcImage, 0, 0, 0, 0,
$destWidth,$destHeight,$srcWidth,$srcHeight );
}
if (($tndir = mkget_thumbnail_dir($dirname, $page['errors'])) == false)
{
return false;
}
$dest_file = $tndir.'/'.$conf['prefix_thumbnail'];
$dest_file.= get_filename_wo_extension($filename);
$dest_file.= '.'.$tn_ext;
// creation and backup of final picture
if (!is_writable($tndir))
{
array_push($page['errors'], '['.$tndir.'] : '.l10n('no write access'));
return false;
}
imagejpeg($destImage, $dest_file, $conf['tn_compression_level']);
// freeing memory ressources
imagedestroy( $srcImage );
imagedestroy( $destImage );
list($tn_width, $tn_height) = getimagesize($dest_file);
$tn_size = floor(filesize($dest_file) / 1024).' KB';
$info = array( 'path' => $path,
'tn_file' => $dest_file,
'tn_width' => $tn_width,
'tn_height' => $tn_height,
'tn_size' => $tn_size );
return $info;
}
// error
else
{
echo l10n('Photo unreachable or no support')." ";
if ( isset( $extension ) )
{
echo l10n('for the file format').' '.$extension;
}
else
{
echo l10n('for this file format');
}
exit();
}
$param_name = 'upload_form_'.$param_shortname;
$form_values[$param_shortname] = $conf[$param_name];
}
$pictures = array();
$stats = array();
if (!function_exists('gd_info'))
{
array_push($page['errors'], l10n('GD library is missing'));
}
// add default event handler for thumbnail resize
add_event_handler('thumbnail_resize', 'RatioResizeImg', EVENT_HANDLER_PRIORITY_NEUTRAL, 5);
// +-----------------------------------------------------------------------+
// | template initialization |
// +-----------------------------------------------------------------------+
$template->set_filenames( array('thumbnail'=>'thumbnail.tpl') );
$template->assign(
array('U_HELP' => get_root_url().'admin/popuphelp.php?page=thumbnail')
);
// +-----------------------------------------------------------------------+
// | search pictures without thumbnails |
// +-----------------------------------------------------------------------+
$wo_thumbnails = array();
$thumbnalized = array();
// what is the directory to search in ?
$query = '
@ -230,127 +96,13 @@ while ( $row=pwg_db_fetch_assoc($result) )
}
} // next element
} // next site id
// +-----------------------------------------------------------------------+
// | thumbnails creation |
// +-----------------------------------------------------------------------+
if (isset($_POST['submit']))
{
$times = array();
$infos = array();
// checking criteria
if (!preg_match('/^[0-9]{2,3}$/', $_POST['width']) or $_POST['width'] < 10)
{
array_push($page['errors'], l10n('width must be a number superior to').' 10');
}
if (!preg_match('/^[0-9]{2,3}$/', $_POST['height']) or $_POST['height'] < 10)
{
array_push($page['errors'], l10n('height must be a number superior to').' 10');
}
// picture miniaturization
if (count($page['errors']) == 0)
{
$num = 1;
foreach ($wo_thumbnails as $path)
{
if (is_numeric($_POST['n']) and $num > $_POST['n'])
{
break;
}
$starttime = get_moment();
if ($info = trigger_event('thumbnail_resize',
false,
$path,
$_POST['width'],
$_POST['height'],
'jpg'
)
)
{
$endtime = get_moment();
$info['time'] = ($endtime - $starttime) * 1000;
array_push($infos, $info);
array_push($times, $info['time']);
array_push($thumbnalized, $path);
$num++;
}
else
{
break;
}
}
if (count($infos) > 0)
{
$sum = array_sum($times);
$average = $sum / count($times);
sort($times, SORT_NUMERIC);
$max = array_pop($times);
if (count($thumbnalized) == 1)
{
$min = $max;
}
else
{
$min = array_shift($times);
}
$tpl_var =
array(
'TN_NB'=>count($infos),
'TN_TOTAL'=>number_format($sum, 2, '.', ' ').' ms',
'TN_MAX'=>number_format($max, 2, '.', ' ').' ms',
'TN_MIN'=>number_format($min, 2, '.', ' ').' ms',
'TN_AVERAGE'=>number_format($average, 2, '.', ' ').' ms',
'elements' => array()
);
foreach ($infos as $i => $info)
{
$tpl_var['elements'][] =
array(
'PATH'=>$info['path'],
'TN_FILE_IMG'=>$info['tn_file'],
'TN_FILESIZE_IMG'=>$info['tn_size'],
'TN_WIDTH_IMG'=>$info['tn_width'],
'TN_HEIGHT_IMG'=>$info['tn_height'],
'GEN_TIME'=>number_format($info['time'], 2, '.', ' ').' ms',
);
}
$template->assign('results', $tpl_var);
}
}
}
// +-----------------------------------------------------------------------+
// | form & pictures without thumbnails display |
// +-----------------------------------------------------------------------+
$remainings = array_diff($wo_thumbnails, $thumbnalized);
if (count($remainings) > 0)
if (count($wo_thumbnails) > 0)
{
$form_url = get_root_url().'admin.php?page=thumbnail';
$gd = !empty($_POST['gd']) ? $_POST['gd'] : 2;
$width = !empty($_POST['width']) ? $_POST['width'] : $conf['tn_width'];
$height = !empty($_POST['height']) ? $_POST['height'] : $conf['tn_height'];
$n = !empty($_POST['n']) ? $_POST['n'] : 5;
$template->assign(
'params',
array(
'F_ACTION'=> $form_url,
'GD_SELECTED' => $gd,
'N_SELECTED' => $n,
'WIDTH_TN'=>$width,
'HEIGHT_TN'=>$height
));
$template->assign(
'TOTAL_NB_REMAINING',
count($remainings));
foreach ($remainings as $path)
foreach ($wo_thumbnails as $path)
{
list($width, $height) = getimagesize($path);
$size = floor(filesize($path) / 1024).' KB';
@ -366,8 +118,28 @@ if (count($remainings) > 0)
}
}
foreach (array_keys($upload_form_config) as $field)
{
if (is_bool($upload_form_config[$field]['default']))
{
$form_values[$field] = $form_values[$field] ? 'checked="checked"' : '';
}
}
$template->assign(
array(
'F_ACTION' => get_root_url().'admin.php?page=thumbnail',
'values' => $form_values,
'TOTAL_NB_REMAINING' => count($wo_thumbnails),
)
);
// +-----------------------------------------------------------------------+
// | return to admin |
// +-----------------------------------------------------------------------+
$template->set_filenames( array('thumbnail'=>'thumbnail.tpl') );
$template->assign('U_HELP', get_root_url().'admin/popuphelp.php?page=thumbnail');
$template->assign_var_from_handle('ADMIN_CONTENT', 'thumbnail');
?>

View file

@ -113,7 +113,7 @@ $conf['calendar_show_empty'] = true;
// width and the height of a cell in the monthly calendar when viewing a
// given month. a value of 0 means that the pretty view is not shown.
// a good suggestion would be to have the width and the height equal
// and smaller than tn_width and tn_height.
// and smaller than upload thumbnails configuration size.
$conf['calendar_month_cell_width'] =80;
$conf['calendar_month_cell_height']=80;
@ -140,16 +140,6 @@ $conf['level_separator'] = ' / ';
// display before and after the current page ?
$conf['paginate_pages_around'] = 2;
// tn_width : default width for thumbnails creation
$conf['tn_width'] = 128;
// tn_height : default height for thumbnails creation
$conf['tn_height'] = 128;
// tn_compression_level: compression level for thumbnail creation. 0 is low
// quality, 100 is high quality.
$conf['tn_compression_level'] = 75;
// show_version : shall the version of Piwigo be displayed at the
// bottom of each page ?
$conf['show_version'] = true;