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