WordPress-上传图片模糊 [英] WordPress - Blur Image on Upload

查看:177
本文介绍了WordPress-上传图片模糊的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

因此,我正在遵循此处提供的示例(我修改为仅模糊,没有水印),以便在上传时在WordPress中生成模糊的图像.问题是,如果上传的文件大小完全相同或小于设置的大小,则WordPress将不会生成图像,因此不会产生模糊的图像.

So I'm following the example given here (which I modified to only blur, no watermark), to make a blurred image in WordPress on upload. The problem is, that if the uploaded file is the exact same size, or smaller, than the set size, then WordPress will not generate an image, and hence no blurred one will be made.

我尝试使用isst($meta['sizes']['background-image-blurred']['file'])确定是否创建了一个,如果不是,则创建copy()源文件,但是不会为该图像生成WordPress元数据"(对于非WordPress用户,元数据与您想象的不同),因此在使用wp_get_attachment_image显示时,会给高度/宽度带来不确定的问题.

I tried using a isst($meta['sizes']['background-image-blurred']['file']) to determine if one was made, and if not then copy() the source file, but then no WordPress "metadata" would be generated for the image (for non-WordPress people, the metadata is different than what you think), so it would give height/width undefined problems when displaying using wp_get_attachment_image.

因此,我相信使用如下所示的wp_get_attachment_image钩子可能是错误的方法.它可能需要在图片上传过程中更早地发生.

So I'm convinced using wp_get_attachment_image hook as shown below is probably the wrong way to do this. It probably needs to happen earlier in the image upload process.

关于如何最好地发挥作用的任何想法?

Any ideas on how to best get this working?

/**
 * Several functions relatting to blurring images on uploaded.
 * @see https://codeable.io/community/how-to-watermark-wordpress-images-with-imagemagick/
 */ 
    add_image_size( 'background-image-blurred', 1920, 1080, true );

    function generate_blurred_image( $meta ) {

      $time = substr( $meta['file'], 0, 7); // Extract the date in form "2015/04"
      $upload_dir = wp_upload_dir( $time ); // Get the "proper" upload dir

      $filename = $meta['sizes']['background-image-blurred']['file'];
      $meta['sizes']['background-image-blurred']['file'] = blur_image( $filename, $upload_dir );

      return $meta;

    }
    add_filter( 'wp_generate_attachment_metadata', 'generate_blurred_image' );    

    function blur_image( $filename, $upload_dir ) {

      $original_image_path = trailingslashit( $upload_dir['path'] ) . $filename;

      $image_resource = new Imagick( $original_image_path );
      $image_resource->gaussianBlurImage( 10, 100 ); // See: http://phpimagick.com/Imagick/gaussianBlurImage

      return save_blurred_image( $image_resource, $original_image_path );

    }    

    function save_blurred_image( $image_resource, $original_image_path ) {

      $image_data = pathinfo( $original_image_path );

      $new_filename = $image_data['filename'] . '-blurred.' . $image_data['extension'];

      // Build path to new blurred image
      $blurred_image_path = str_replace($image_data['basename'], $new_filename, $original_image_path);

      if ( ! $image_resource->writeImage( $blurred_image_path ) ) {
        return $image_data['basename'];          
      }

      // Delete the placeholder image WordPress made now that it's been blurred
      unlink( $original_image_path );

      return $new_filename;

    }    

推荐答案

不幸的是,wp没有设置强制大小的过滤器,因此您可以执行的操作是将其钩住,如果未创建则调整图像大小,然后将其弹出到元数据.

Unfortunately wp hasn't got a filter to force a size so what you can do is hook in after and resize your image if not created and pop it into the metadata.

我还没有imagick,所以您必须自己尝试这些功能,但是上面的过程正确,您只需要更新文件名并在下面的数组中键入即可. PS在过滤器内不输出任何内容!

I haven't got imagick so you will have to try these functions yourself, but you have the correct process above, you just need to update the filename and type in the array below. PS don't output anything within the filter!

function custom_img_size(){
    add_image_size( 'background-image-blurred', 1920, 1080, true );
}

add_action( 'after_setup_theme', 'custom_img_size' );


add_filter('wp_generate_attachment_metadata', 'force_add_size', 100);
function force_add_size( $metadata ) {

   if(!isset($metadata['sizes']['background-image-blurred'])){
        //not set so initiate our custom size...
        //I dont have imagick installed so just use your functions here to duplicate
        //note original file = $filename update the $newfilename below...
        //sample resize code ...
        $upload_dir = wp_upload_dir();
        $filename= $upload_dir['basedir'].'/'.$metadata['file'];
        $extension = strtolower(strrchr($metadata['file'], '.'));
        $newfilename= str_replace($extension, '-1200x1080', $filename).$extension;

        copy($filename, $newfilename );
        //end sample resize code.....



        $filetype= 'image/jpeg';
        $metadata['sizes']['background-image-blurred']= array(
            "file"=> $newfilename,
            "width"=> 1920, 
            "height"=> 1080,
            "mime-type"=> $filetype 
        );

   }


   return $metadata;

}

更新

  1. 此功能旨在仅捕获现有过滤器无法创建模糊的自定义尺寸的位置,否则不执行任何操作.您仍应包括原始过滤器.您可能在原始代码中遇到了问题:您正在删除过滤器中的原始文件,这会引起问题,因为有一个称为"_wp_attached_file"的postmeta字段需要更新.我在下面包括了一个注释.

  1. This is designed to only catch where your existing filter has failed to create your blurred custom size otherwise it does nothing. You should still include your original filters. You may have an issue in the original code: You are deleting the original file in your filters and this will cause issues as there is a postmeta field called '_wp_attached_file' that will need updating. I have included a note below on this.

过滤器在保存之前捕获元数据,因此一旦返回$ metadata,所有更改也将被保存.如果您查看源代码:

The filter catches the metadata before saving so any changes are also going to be saved once you return the $metadata. If you look at the source code: https://core.trac.wordpress.org/browser/tags/3.8.1/src/wp-admin/includes/image.php#L72 here you can see exactly how it works. I've also confirmed using wp4.3

我试图在下面插入您需要的imagick函数.我没有进行测试,因为我实际上没有在任何地方安装它. (imagemagick实际上是一个很棒的开源程序,但是非常耗费服务器资源).尝试使用此功能代替上面的功能:

I have attempted to insert the imagick functions you need below. I havent tested as i dont actually have it installed anywhere. (imagemagick is actually a wonderful opensource program but very server intensive). Try this function in place of the one above:

add_filter('wp_generate_attachment_metadata', 'force_add_size', 100, 2);

function force_add_size( $metadata, $id ){

    $upload_dir = wp_upload_dir();
    $filename= $upload_dir['basedir'].'/'.$metadata['file'];
    $extension = strtolower(strrchr($metadata['file'], '.'));
    $newfilename= str_replace($extension, '-blurred', $filename).$extension;

    $image_resource = new Imagick( $filename);
    $image_resource->resizeImage(1920,1080,Imagick::FILTER_LANCZOS,.3);
    $image_resource->writeImage( $newfilename );
    //http://www.dylanbeattie.net/magick/filters/result.html

    unlink( $filename );//delete original image altogether ---> you might want to update the post meta on this '_wp_attached_file' , you can actually get the attachment id from the filter, i have added it above. It would be best to have a actual image url in there! something like $sfile= str_replace($upload_dir['basedir'],'', $newfilename); update_post_meta($id, '_wp_attached_file', $sfile );



    switch($extension){
        case '.jpg':
        case '.jpeg':
            $type = 'image/jpeg';
            break;
        case '.gif':
            $type = 'image/gif';
            break;
        case '.png':
            $type = 'image/png';
            break;
        default:
            $type = 'image/jpeg'; // you might want a conditional to check its actually a image...imagick will do this for you as well....it shouldnt get this far if not a image.
            break;
    } 

    $metadata['sizes']['background-image-blurred']= array(
        "file"=> $newfilename,
        "width"=> 1920,//your custom image size, has to be this! you could get the global var and check for sizes but its this size in particular we want? 
        "height"=> 1080,
        "mime-type"=> $type 
    );

    return $metadata;
}

更新 为了防止图像张开较小的图像,请使用此代码替换imagick代码.

update to prevent the image stretching out smaller images replace the imagick code with this.

$upload_dir = wp_upload_dir();
$filename= $upload_dir['basedir'].'/'.$metadata['file'];
$extension = strtolower(strrchr($metadata['file'], '.'));
$newfilename= str_replace($extension, '-blurred', $filename).$extension;

$image_resource = new Imagick( $filename);


if($image_resource->getImageWidth() <= 1920 || $image_resource->getImageHeight() > <= 1020) {
    return $metadata;
}

$image_resource->resizeImage(1920,1080,Imagick::FILTER_LANCZOS,.3);
$image_resource->writeImage( $newfilename );
//http://www.dylanbeattie.net/magick/filters/result.html

这篇关于WordPress-上传图片模糊的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆