Làm thế nào để tự động thêm các góc tròn vào hình thu nhỏ?

Tôi muốn tạo hình thu nhỏ góc tròn tự động cho một dự án cụ thể mà tôi đang thực hiện, sử dụng một cái gì đó như thế này: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

Điều tôi lý tưởng muốn làm là tìm cách nối một cái gì đó như thế này vào chính quá trình tạo hình thu nhỏ và lưu trữ trên máy chủ. /wp-includes/media.phpdường như không có bất kỳ móc áp dụng nào, vì vậy tôi có thể phải tự lăn.

Bất kỳ manh mối về nơi bắt đầu?

EDIT: Không có trong CSS. Đã có một số gợi ý hay về vấn đề này nhưng tôi đang sử dụng bán kính đường viền trên toàn bộ trang web và các hình ảnh đặc biệt cần được làm tròn ở phía máy chủ. Cảm ơn

Có vẻ như bạn có thể nối vào wp_create_thumbnailbộ lọc :

function wp_create_thumbnail( $file, $max_side, $deprecated = '' ) {
if ( !empty( $deprecated ) )
     _deprecated_argument( __FUNCTION__, '1.2' );
     $thumbpath = image_resize( $file, $max_side, $max_side );
     return apply_filters( 'wp_create_thumbnail', $thumbpath );
}

Vì vậy, chỉ cần thực hiện thao tác của bạn, và trả kết quả cho wp_create_thumbnail.

Mặc dù bạn có thể xử lý các góc được làm tròn bằng Php và hình ảnh GD (bạn vẫn sẽ phải chọn màu nền), đó là rất nhiều công việc / mã / xử lý cho những gì có thể dễ dàng thực hiện bằng JavaScript hoặc CSS3.

Đối với hình ảnh được làm tròn trong CSS3, bạn phải bọc hình ảnh trong div và làm cho hình ảnh trở thành hình nền của div đó, không thực sự thiết thực.

Vì vậy, tôi nghĩ rằng bạn chỉ nên sử dụng jquery, chỉ cần ghi lại kịch bản khi cần và nối lớp jquery vào hình thu nhỏ của bạn thông qua một hook hoặc trực tiếp.

Thủ thuật javascript / jquery về cơ bản áp dụng 4 gifs góc cho hình ảnh để làm cho nó xuất hiện tròn. Có nhiều trò đùa khác nhau nằm trên các interwebs, chẳng hạn như http://maestric.com/doc/css/rounded_cornftimeimages .

Đừng nói với ai là họ không thực sự tròn.

Đây là cách tôi sử dụng một trong các bộ lọc hình ảnh wordpress, tôi đã thử sử dụng bộ lọc được đề xuất bởi Chip Bennett nhưng không thành công.

Những gì tôi đã làm là tạo một kích thước tùy chỉnh và sau đó kiểm tra từng hình ảnh khi nó được tạo nếu đó là kích thước cụ thể và nếu đó là áp dụng các bộ lọc phpthumb. Lý tưởng nhất là tôi muốn có thể kiểm tra tên của kích thước hình ảnh tùy chỉnh nhưng tôi chưa tìm ra cách để làm điều đó.

add_theme_support( 'post-thumbnails' );
add_image_size( 'rounded-saturated', 250, 100, true ); 
require_once('path_to\phpthumb.class.php');
add_filter('image_make_intermediate_size', 'paul_rounded_filter');

function paul_rounded_filter($file) {
    $info = getimagesize($file);

    // check for our image size and do stuff
    if($info[0] == 250 && $info[1] == 100)
    {
        // create phpThumb object
        $phpThumb = new phpThumb();
        $phpThumb->resetObject();

        // set data source -- do this first, any settings must be made AFTER this call      
        $phpThumb->setSourceData(file_get_contents($file));
        $output_filename = $file;


        // PLEASE NOTE:
        // You must set any relevant config settings here. The phpThumb
        // object mode does NOT pull any settings from phpThumb.config.php
        //$phpThumb->setParameter('config_document_root', '/home/groups/p/ph/phpthumb/htdocs/');
        //$phpThumb->setParameter('config_cache_directory', '/tmp/persistent/phpthumb/cache/');

        // set parameters (see "URL Parameters" in phpthumb.readme.txt)
        $phpThumb->setParameter('fltr', 'ric|30|30');
        $phpThumb->setParameter('fltr', 'sat|-100');

        // generate & output thumbnail
        if ($phpThumb->GenerateThumbnail()) { // this line is VERY important, do not remove it!
            if ($phpThumb->RenderToFile($output_filename)) {
                // do something on success
                echo 'Successfully rendered to "'.$output_filename.'"';
                //die;
            } else {
                // do something with debug/error messages
                echo 'Failed:<pre>'.implode("\n\n", $phpThumb->debugmessages).'</pre>';
                die;
            }
        } else {
            // do something with debug/error messages
            echo 'Failed:<pre>'.$phpThumb->fatalerror."\n\n".implode("\n\n", $phpThumb->debugmessages).'</pre>';
            die;
        }
    }

    if ( $width || $height ) {
        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;
}

Nếu bạn thêm mã đó vào tệp tin.php của chủ đề, hãy tải xuống phpthumb và đặt đường dẫn bạn nên đi. Tôi đã làm cho nó hoạt động trên bản cài đặt xampp cục bộ của mình nên hy vọng nó cũng hoạt động với người khác. Các bình luận phpThumb là từ ví dụ demo đơn giản.

Không có lý do gì để không làm điều này với CSS, nó hoạt động và sẽ được hỗ trợ trong tất cả các trình duyệt chính trừ IE 8 trở xuống:

Nếu bạn thực sự muốn hỗ trợ IE, bạn có thể sử dụng Modernizr, nó sẽ thêm một lớp các góc không tròn trên phần tử img mục tiêu trong các trình duyệt không có khả năng.

Thêm class = "góc tròn" vào hình thu nhỏ của bạn và trong css của bạn:

.rounded-corners {
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border-radius: 30px;
}

Tôi đã thực hiện một thử nghiệm nhanh trên một hình ảnh ngẫu nhiên trên trang nhất của WPCandy.com bằng cách thêm các góc vào lớp hình ảnh bằng cách sử dụng Fireorms. Đây là kết quả.

Trước:

Sau:

CSS được nhập vào Fireorms:

Đối với các góc .no của bạn, hãy sử dụng một trong các phương pháp dự phòng nếu bạn cảm thấy cần thiết.

Những hình thu nhỏ nào bạn muốn tạo kiểu, kích thước hình ảnh "hình thu nhỏ" nói chung hoặc Hình thu nhỏ?

Cả hai có thể dễ dàng được thực hiện thông qua CSS - cụ thể là thuộc border-radiustính; câu trả lời cụ thể sẽ phụ thuộc vào nhu cầu chính xác của bạn. Tôi sẽ vui lòng cập nhật.

PS IMHO đi đến tuyến hình ảnh TimThumb / được lưu trong bộ nhớ cache là tối ưu phụ. Chỉ cần sử dụng các hình ảnh vuông góc do WordPress tạo ra (đã là một phần của bộ đệm đối tượng) và sử dụng CSS để làm tròn các góc.

Khi tìm kiếm trên google, có thể làm tròn các góc với GD nhưng kết quả không phải là lớn nhất; họ hơi lởm chởm; nhưng đó là một cuộc gọi chủ quan từ phía tôi: http://www.assinstallsys.com/dataService/php_roundedCorners.php

Nếu bạn phải làm điều này; tôi khuyên bạn nên sử dụng tập lệnh timthumb làm điểm bắt đầu:

Dự án Timthumb: http://timthumb.googlecode.com http://timthumb.googlecode.com/svn/trunk/timthumb.php

Stackoverflow cũng có một bài viết về điều này: /programming/609109/rounded-corners-on-images-USE-php

Bạn đã xem qua ccs3pie Rounded Corners và CSS3 hack cho điều này có nghĩa là điều này sẽ làm những gì bạn muốn cũng như buộc cũ tốt phải nộp để tuân thủ.

OK điều này thật dễ dàng !!

Đầu tiên như mọi người đã nói cách tốt nhất, sạch nhất và dễ nhất là sử dụng bán kính đường viền css3. Điều này hoạt động trong hầu hết các trình duyệt hiện đại, ngoại trừ IE6-8 điển hình không hỗ trợ ... mặc dù IE9 sẽ làm được.

.round {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Vì vậy, nếu bạn giống như tôi và tất cả các khách hàng của bạn đều sử dụng IE thì tôi khuyên dùng CSS3 Pie như trên http://css3pie.com/ . Hạn chế duy nhất là nó gây rối với chỉ số z của hình ảnh, vì vậy nếu bạn đang sử dụng thanh trượt làm mờ dần bạn có thể gặp sự cố.

Nếu bạn không thích sử dụng CSS3 Pie, tôi khuyên bạn nên giới thiệu http://jquery.malsup.com/corner/ . Bạn chỉ cần liên kết nó trong tiêu đề của bạn, cùng với jQuery và sử dụng như sau:

<script>
        $(function(){
        $('.round').corner();
    });
</script>

Nó chọn khai báo CSS3 và đối với bất kỳ trình duyệt nào không hỗ trợ nó, nó sẽ hiển thị các góc được làm tròn thông qua jquery.

Gần đây chúng tôi đã sử dụng cả hai thứ này trên một trang web của khách hàng tại đây: http://www.theathenaprogramme.co.uk/

Công việc đã hoàn thành :-) Hy vọng điều này sẽ giúp.

Chỉnh sửa: Chỉ cần lưu ý rằng bạn cần thực hiện việc này trước khi hình ảnh được lưu thông qua media.php. Hãy nghĩ rằng giải pháp của tôi không áp dụng được trong trường hợp này.

Tôi đã sử dụng plugin Get Post Image để làm điều này tại đây: http://surfhatteras.com/

Get Post Image là một trình bao bọc cho Get The Image WordPress Plugin và thư viện phpThumb.

Sử dụng nó, bạn có thể làm một cái gì đó như <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> làm tròn các góc của một hình ảnh được đăng. Hoặc bạn có thể tự bọc hình ảnh của mình: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

Đừng quên bộ nhớ cache! http://mrphp.com.au/code/image-cache-USE-phpthumb-and-modrewrite