填写您的邮件地址,订阅我们的精彩内容:

WordPress图片裁剪开始位置:不要从中间而从顶部开始裁剪图片

790

在WordPress开发中,多数情况下我们可能涉及到文章的缩略图,特别是wordpress的使用延伸到各种图片类瀑布流网站之后,想要了解wordpress缩略图,请详细阅读《WordPress文章特色图片功能详解》并根据文章中的提示,自己实践和思考。现在,我们要谈的问题是,wordpress默认情况下,裁剪的图片会直接裁剪图片的中间部分,例如你上传了一张美女图片,上传上去由于图片的尺寸超出了内部规定的尺寸,wordpress会对其进行裁剪,按照规定的尺寸裁剪好后生成另外一张图片进行保存,可惜的是,当你调用这张图片的时候发现,美女的头被卡擦了,这样的缩略图完全失去了吸引读者的功效。

要解决这个问题,首先需要站长勤快些,如果网站的所有图片都是你自己上传的话,为何不在上传之前裁剪到合适的尺寸呢?只有这样才能确保100%准确,而且不会产生多余的图片消耗网站空间。其次,如果你的网站开放给所有用户的话,或许你就会用到本文提供的方法。

我通过谷歌搜索了一下关于这个问题的解决办法,可惜的是,中文网站上没有一篇入围搜索结果,而通过用英文检索时,却得到的一大把。这也说明,我国的WordPress开发确实还存在一些缺陷,还需要继续努力。好了,我们来看看别人的解决办法。在Brad Touesnard的网站上提供了一组自己创建的代码,来规定裁剪的初始位置,代码有些长,请耐心阅读:

<?php
/* Example Usage:
?* bt_add_image_size( 'product-screenshot', 300, 300, array( 'left', 'top' ) );
?* bt_add_image_size( 'product-feature', 460, 345, array( 'center', 'top' ) );
?*/
?
add_filter( 'intermediate_image_sizes_advanced', 'bt_intermediate_image_sizes_advanced' );
add_filter( 'wp_generate_attachment_metadata', 'bt_generate_attachment_metadata', 10, 2 );
?
/**
?* Registers a new image size with cropping positions
?*
?* The $crop parameter works as in the 'add_image_size' function taking true or
?* false values. If set to true, the default cropping position is 'center', 'center'.
?*
?* The $crop parameter also takes an array of the format
?* array( x_crop_position, y_crop_position )
?* x_crop_position can be 'left', 'center', 'right'
?* y_crop_position can be 'top', 'center', 'bottom'
?*
?* @param string $name Image size identifier.
?* @param int $width Image width.
?* @param int $height Image height.
?* @param bool|array $crop Optional, default is false. Whether to crop image to specified height and width or resize. An array can specify positioning of the crop area.
?* @return bool|array False, if no image was created. Metadata array on success.
?*/
function bt_add_image_size( $name, $width = 0, $height = 0, $crop = false ) {
?? ?global $_wp_additional_image_sizes;
?? ?$_wp_additional_image_sizes[$name] = array( 'width' => absint( $width ), 'height' => absint( $height ), 'crop' => $crop );
}
?
?
/**
?* Returning no sizes (an empty array) will force
?* wp_generate_attachment_metadata to skip creating intermediate image sizes on
?* upload, then we can run our own resizing functions by hooking into the
?* 'wp_generate_attachment_metadata' filter
?*/
function bt_intermediate_image_sizes_advanced( $sizes ) {
?? ?return array();
}
?
?
function bt_generate_attachment_metadata( $metadata, $attachment_id ) {
??? $attachment = get_post( $attachment_id );
?? ?
??? $uploadPath = wp_upload_dir();
??? $file = path_join($uploadPath['basedir'], $metadata['file']);
?
?? ?if ( !preg_match('!^image/!', get_post_mime_type( $attachment )) || !file_is_displayable_image( $file ) ) return $metadata;
?
??? global $_wp_additional_image_sizes;
?
??? foreach ( get_intermediate_image_sizes() as $s ) {
??????? $sizes[$s] = array( 'width' => '', 'height' => '', 'crop' => FALSE );
??????? if ( isset( $_wp_additional_image_sizes[$s]['width'] ) )
??????????? $sizes[$s]['width'] = intval( $_wp_additional_image_sizes[$s]['width'] ); // For theme-added sizes
??????? else
??????????? $sizes[$s]['width'] = get_option( "{$s}_size_w" ); // For default sizes set in options
??????? if ( isset( $_wp_additional_image_sizes[$s]['height'] ) )
??????????? $sizes[$s]['height'] = intval( $_wp_additional_image_sizes[$s]['height'] ); // For theme-added sizes
??????? else
??????????? $sizes[$s]['height'] = get_option( "{$s}_size_h" ); // For default sizes set in options
??????? if ( isset( $_wp_additional_image_sizes[$s]['crop'] ) )
??????????? $sizes[$s]['crop'] = $_wp_additional_image_sizes[$s]['crop'];
??????? else
??????????? $sizes[$s]['crop'] = get_option( "{$s}_crop" );
??? }
?
??? foreach ( $sizes as $size => $size_data ) {
??????? $resized = bt_image_make_intermediate_size( $file, $size_data['width'], $size_data['height'], $size_data['crop'] );
??????? if ( $resized )
??????????? $metadata['sizes'][$size] = $resized;
??? }
?? ?
??? return $metadata;
}
?
?
/**
?* Resize an image to make a thumbnail or intermediate size.
?*
?* The returned array has the file size, the image width, and image height. The
?* filter 'image_make_intermediate_size' can be used to hook in and change the
?* values of the returned array. The only parameter is the resized file path.
?*
?* @param string $file File path.
?* @param int $width Image width.
?* @param int $height Image height.
?* @param bool|array $crop Optional, default is false. Whether to crop image to specified height and width or resize. An array can specify positioning of the crop area.
?* @return bool|array False, if no image was created. Metadata array on success.
?*/
function bt_image_make_intermediate_size( $file, $width, $height, $crop = false ) {
?? ?if ( $width || $height ) {
?? ??? ?$resized_file = bt_image_resize( $file, $width, $height, $crop, null, null, 90 );
?? ??? ?if ( !is_wp_error( $resized_file ) && $resized_file && $info = getimagesize( $resized_file ) ) {
?? ??? ??? ?$resized_file = apply_filters('image_make_intermediate_size', $resized_file);
?? ??? ??? ?return array(
?? ??? ??? ??? ?'file' => wp_basename( $resized_file ),
?? ??? ??? ??? ?'width' => $info[0],
?? ??? ??? ??? ?'height' => $info[1],
?? ??? ??? ?);
?? ??? ?}
?? ?}
?? ?return false;
}
?
?
?
/**
?* Retrieve calculated resized dimensions for use in imagecopyresampled().
?*
?* Calculate dimensions and coordinates for a resized image that fits within a
?* specified width and height. If $crop is true, the largest matching central
?* portion of the image will be cropped out and resized to the required size.
?*
?* @param int $orig_w Original width.
?* @param int $orig_h Original height.
?* @param int $dest_w New width.
?* @param int $dest_h New height.
?* @param bool $crop Optional, default is false. Whether to crop image or resize.
?* @return bool|array False, on failure. Returned array matches parameters for imagecopyresampled() PHP function.
?*/
function bt_image_resize_dimensions($orig_w, $orig_h, $dest_w, $dest_h, $crop = false) {
?
?? ?if ($orig_w <= 0 || $orig_h <= 0)
?? ??? ?return false;
?? ?// at least one of dest_w or dest_h must be specific
?? ?if ($dest_w <= 0 && $dest_h <= 0)
?? ??? ?return false;
?
?? ?if ( $crop ) {
?? ??? ?// crop the largest possible portion of the original image that we can size to $dest_w x $dest_h
?? ??? ?$aspect_ratio = $orig_w / $orig_h;
?? ??? ?$new_w = min($dest_w, $orig_w);
?? ??? ?$new_h = min($dest_h, $orig_h);
?
?? ??? ?if ( !$new_w ) {
?? ??? ??? ?$new_w = intval($new_h * $aspect_ratio);
?? ??? ?}
?
?? ??? ?if ( !$new_h ) {
?? ??? ??? ?$new_h = intval($new_w / $aspect_ratio);
?? ??? ?}
?
?? ??? ?$size_ratio = max($new_w / $orig_w, $new_h / $orig_h);
?
?? ??? ?$crop_w = round($new_w / $size_ratio);
?? ??? ?$crop_h = round($new_h / $size_ratio);
?
??????? if ( !is_array( $crop ) || count( $crop ) != 2 ) {
?? ??? ??? ?$crop = apply_filters( 'image_resize_crop_default', array( 'center', 'center' ) );
?? ??? ?}
?? ??? ?
?? ??? ?switch ( $crop[0] ) {
?? ??? ??? ?case 'left': $s_x = 0; break;
?? ??? ??? ?case 'right': $s_x = $orig_w - $crop_w; break;
?? ??? ??? ?default: $s_x = floor( ( $orig_w - $crop_w ) / 2 );
?? ??? ?}
?
?? ??? ?switch ( $crop[1] ) {
?? ??? ??? ?case 'top': $s_y = 0; break;
?? ??? ??? ?case 'bottom': $s_y = $orig_h - $crop_h; break;
?? ??? ??? ?default: $s_y = floor( ( $orig_h - $crop_h ) / 2 );
?? ??? ?}
?? ?} else {
?? ??? ?// don't crop, just resize using $dest_w x $dest_h as a maximum bounding box
?? ??? ?$crop_w = $orig_w;
?? ??? ?$crop_h = $orig_h;
?
?? ??? ?$s_x = 0;
?? ??? ?$s_y = 0;
?
?? ??? ?list( $new_w, $new_h ) = wp_constrain_dimensions( $orig_w, $orig_h, $dest_w, $dest_h );
?? ?}
?
?? ?// if the resulting image would be the same size or larger we don't want to resize it
?? ?if ( $new_w >= $orig_w && $new_h >= $orig_h )
?? ??? ?return false;
?
?? ?// the return array matches the parameters to imagecopyresampled()
?? ?// int dst_x, int dst_y, int src_x, int src_y, int dst_w, int dst_h, int src_w, int src_h
?? ?return array( 0, 0, (int) $s_x, (int) $s_y, (int) $new_w, (int) $new_h, (int) $crop_w, (int) $crop_h );
?
}
?
?
/**
?* Scale down an image to fit a particular size and save a new copy of the image.
?*
?* The PNG transparency will be preserved using the function, as well as the
?* image type. If the file going in is PNG, then the resized image is going to
?* be PNG. The only supported image types are PNG, GIF, and JPEG.
?*
?* Some functionality requires API to exist, so some PHP version may lose out
?* support. This is not the fault of WordPress (where functionality is
?* downgraded, not actual defects), but of your PHP version.
?*
?* @since 2.5.0
?*
?* @param string $file Image file path.
?* @param int $max_w Maximum width to resize to.
?* @param int $max_h Maximum height to resize to.
?* @param bool $crop Optional. Whether to crop image or resize.
?* @param string $suffix Optional. File Suffix.
?* @param string $dest_path Optional. New image file path.
?* @param int $jpeg_quality Optional, default is 90. Image quality percentage.
?* @return mixed WP_Error on failure. String with new destination path.
?*/
function bt_image_resize( $file, $max_w, $max_h, $crop = false, $suffix = null, $dest_path = null, $jpeg_quality = 90 ) {
?
?? ?$image = wp_load_image( $file );
?? ?if ( !is_resource( $image ) )
?? ??? ?return new WP_Error( 'error_loading_image', $image, $file );
?
?? ?$size = @getimagesize( $file );
?? ?if ( !$size )
?? ??? ?return new WP_Error('invalid_image', __('Could not read image size'), $file);
?? ?list($orig_w, $orig_h, $orig_type) = $size;
?
?? ?// Rotate if EXIF 'Orientation' is set
?? ?// This code is from the reverted patch at
?? ?// http://core.trac.wordpress.org/changeset/11746/trunk/wp-includes/media.php
?? ?$rotate = false;
?? ?if ( is_callable( 'exif_read_data' ) && in_array( $orig_type, apply_filters( 'wp_read_image_metadata_types', array( IMAGETYPE_JPEG, IMAGETYPE_TIFF_II, IMAGETYPE_TIFF_MM ) ) ) ) {
?? ??? ?$exif = @exif_read_data( $file, null, true );
?? ??? ?if ( $exif && isset( $exif['IFD0'] ) && is_array( $exif['IFD0'] ) && isset( $exif['IFD0']['Orientation'] ) ) {
?? ??? ??? ?if ( 6 == $exif['IFD0']['Orientation'] )
?? ??? ??? ??? ?$rotate = 90;
?? ??? ??? ?elseif ( 8 == $exif['IFD0']['Orientation'] )
?? ??? ??? ??? ?$rotate = 270;
?? ??? ?}
?? ?}
?? ?
?? ?if ( $rotate )
?? ??? ?list($max_h,$max_w) = array($max_w,$max_h);
?
?? ?$dims = bt_image_resize_dimensions($orig_w, $orig_h, $max_w, $max_h, $crop);
?? ?if ( !$dims )
?? ??? ?return new WP_Error( 'error_getting_dimensions', __('Could not calculate resized image dimensions') );
?? ?list($dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h) = $dims;
?
?? ?$newimage = wp_imagecreatetruecolor( $dst_w, $dst_h );
?
?? ?if ( $rotate )
?? ??? ?list($src_y,$src_x) = array($src_x,$src_y);
?
?? ?imagecopyresampled( $newimage, $image, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h);
?
?? ?// convert from full colors to index colors, like original PNG.
?? ?if ( IMAGETYPE_PNG == $orig_type && function_exists('imageistruecolor') && !imageistruecolor( $image ) )
?? ??? ?imagetruecolortopalette( $newimage, false, imagecolorstotal( $image ) );
?
?? ?// we don't need the original in memory anymore
?? ?imagedestroy( $image );
?
?? ?// $suffix will be appended to the destination filename, just before the extension
?? ?if ( !$suffix ) {
?? ??? ?if ( $rotate )
?? ??? ??? ?$suffix = "{$dst_h}x{$dst_w}";
?? ??? ?else
?? ??? ??? ?$suffix = "{$dst_w}x{$dst_h}";
?? ?}
?
?? ?$info = pathinfo($file);
?? ?$dir = $info['dirname'];
?? ?$ext = $info['extension'];
?? ?$name = wp_basename($file, ".$ext");
?
?? ?if ( !is_null($dest_path) and $_dest_path = realpath($dest_path) )
?? ??? ?$dir = $_dest_path;
?? ?$destfilename = "{$dir}/{$name}-{$suffix}.{$ext}";
?
?? ?if ( IMAGETYPE_GIF == $orig_type ) {
?? ??? ?if ( !imagegif( $newimage, $destfilename ) )
?? ??? ??? ?return new WP_Error('resize_path_invalid', __( 'Resize path invalid' ));
?? ?} elseif ( IMAGETYPE_PNG == $orig_type ) {
?? ??? ?if ( !imagepng( $newimage, $destfilename ) )
?? ??? ??? ?return new WP_Error('resize_path_invalid', __( 'Resize path invalid' ));
?? ?} else {
?? ??? ?if ( $rotate ) {
?? ??? ??? ?$newimage = _rotate_image_resource( $newimage, 360 - $rotate );
?? ??? ?}
?? ??? ?
?? ??? ?// all other formats are converted to jpg
?? ??? ?$destfilename = "{$dir}/{$name}-{$suffix}.jpg";
?? ??? ?$return = imagejpeg( $newimage, $destfilename, apply_filters( 'jpeg_quality', $jpeg_quality, 'image_resize' ) );
?? ??? ?if ( !$return )
?? ??? ??? ?return new WP_Error('resize_path_invalid', __( 'Resize path invalid' ));
?? ?}
?
?? ?imagedestroy( $newimage );
?
?? ?// Set correct file permissions
?? ?$stat = stat( dirname( $destfilename ));
?? ?$perms = $stat['mode'] & 0000666; //same permissions as parent folder, strip off the executable bits
?? ?@ chmod( $destfilename, $perms );
?
?? ?return $destfilename;
}

这种方法需要你用bt_add_image_size代替原来我们习惯的add_image_size,具体的使用方法我们就不详细解释,总之这个函数给出了第三个参数,让你可以规定裁剪的开始位置。

而实际上,更为简洁的方法是,我找到一个插件,似乎可以实现这个功能,你不妨下载尝试。

Shailan.com Staff则提供了一个更直接的方法,就是修改wordpress系统文件/wp-includes/media.php,找到:

$s_x = floor( ($orig_w - $crop_w) / 2 );
$s_y = floor( ($orig_h - $crop_h) / 2 );

把其中的$s_y修改为:

$s_y = 0;// 或者你想要的值

总之,这种方法直接有效且最容易令人理解,因为$s_x和$s_y就是wordpress系统在裁剪时,裁剪区域的起始位置。而且他还推荐了一个插件:Regenerate Thumbnails,应是基于这种方法来实现的。

stackexchange社区还有人用这样的方法更加便捷,或许你可以借鉴,但是否奏效还需要验证:

add_filter('wp_generate_attachment_metadata', 'custom_crop');

function custom_crop($metadata) {

??? $uploads = wp_upload_dir();
??? $file = path_join( $uploads['basedir'], $metadata['file'] ); // original image file
??? list( $year, $month ) = explode( '/', $metadata['file'] );
??? $target = path_join( $uploads['basedir'], "{$year}/{$month}/".$metadata['sizes']['medium']['file'] ); // intermediate size file
??? $image = imagecreatefromjpeg($file); // original image resource
??? $image_target = wp_imagecreatetruecolor( 44, 44 ); // blank image to fill
??? imagecopyresampled($image_target, $image, 0, 0, 25, 15, 44, 44, 170, 170); // crop original
??? imagejpeg($image_target, $target, apply_filters( 'jpeg_quality', 90, 'image_resize' )); // write cropped to file

??? return $metadata;
}

好了,总之方法是很多的,关键在于你需要用英语去搜索。

下面我简单说几句