0

所以我试图使用“循环”传回的信息来创建画布元素。以下是我的代码。它有效，但仅在循环创建的最后一个画布上有效。 

<?php 
query_posts(array('number_posts'=>5, 'orderby'=>'rand'));
while ( have_posts() ) : the_post(); ?>
    <canvas class="post" id="<?=the_ID()?>">
        <script type="text/javascript">
            window.onload = function () {
                var cur_post = document.getElementById('<?PHP echo $post->ID; ?>');

                if (cur_post && cur_post.getContext) {
                    var context = cur_post.getContext('2d');
                    if (context) {
                        var img = new Image();
                        (function(img) {
                            img.src = "<?php 
                                $args = array(
                                   'post_type' => 'attachment',
                                   'numberposts' => -1,
                                   'post_status' => null,
                                   'post_parent' => $post->ID
                                 );

                                 $attachments = get_posts( $args );
                                 if ( $attachments ) {
                                    $image_src_array = wp_get_attachment_image_src( $attachments[0]->ID, 'large' );
                                    $image_src = $image_src_array[0];
                                    echo $image_src;
                                 }; ?>";
                            img.onload = function() {
                                img.width = parseInt(cur_post.offsetWidth);
                                var resize_quotient = img.width/img.naturalWidth;
                                img.height = img.naturalHeight*resize_quotient;
                                context.drawImage(img, 0, -(img.naturalHeight/2), img.width, img.height);
                            };
                        })(img);
                    };
                };
            };
        </script>
        <div class="post" style="background: url(<?php 
            $args = array(
                       'post_type' => 'attachment',
                       'numberposts' => -1,
                       'post_status' => null,
                       'post_parent' => $post->ID
                  );

                  $attachments = get_posts( $args );
                     if ( $attachments ) {
                        $image_src_array = wp_get_attachment_image_src( $attachments[0]->ID, 'large' );
                        $image_src = $image_src_array[0];
                        echo $image_src;
                     } ?>
         ) no-repeat center center;">
            <p class="post_excerpt" style="clear: both"><?PHP the_excerpt() ?></p>
            <div class="post_content">
                <h2 class="post_title"><a href="<?php the_permalink() ?>"><?PHP the_title(); ?></a></h2>
                <h3 class="post_category"><?php the_category() ?></h3>
            </div>
        </div>
    </canvas>
<?php endwhile;

?>

我错过了一些明显的东西吗？我已经尝试记录我能想到的所有内容，并且我为每个项目获得了唯一的值，但只有最后一个画布上绘制了任何东西。我什至尝试使用自引用匿名函数，因为我看到这是另一个相关页面上的修复。此外，即使它确实将图像放在最后一个画布上，它在绘制图像时根本不会调整图像大小。

帮助？

4

1 回答 1

0

我需要将 cur_post 之后的整个第一个 if 语句包装在一个自引用匿名函数中。我在代码中有更深的内容，它只需要向上移动，以便它引用每个单独的画布，而不仅仅是最后一个：

(function(cur_post){
if (cur_post && cur_post.getContext) {
    var context = cur_post.getContext('2d');
    if (context) {
        var img = new Image();
        img.src = "<?php 
            $args = array(
               'post_type' => 'attachment',
               'numberposts' => -1,
               'post_status' => null,
               'post_parent' => $post->ID
             );

             $attachments = get_posts( $args );
             if ( $attachments ) {
                $image_src_array = wp_get_attachment_image_src( $attachments[0]->ID, 'large' );
                $image_src = $image_src_array[0];
                echo $image_src;
             }; ?>";
        img.onload = function() {
            img.width = parseInt(cur_post.offsetWidth);
            var resize_quotient = img.width/img.naturalWidth;
            img.height = img.naturalHeight*resize_quotient;
            console.log(img);
            context.drawImage(img, 0, -(img.naturalHeight/2), img.height, img.width);
        };
    };
};
})(cur_post);
于 2012-06-26T14:49:16.130 回答