Wordpress循环并将图像添加到HTML5画布元素

Question

所以我试图使用“循环”传回的信息创建画布元素。以下是我的代码。它可以工作，但只适用于该循环创建的最后一个画布。

<?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; 

？>

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

帮助？

Answer 1

我需要在自引用匿名函数中将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);