Wordpress 루프 및 HTML5 캔버스 요소에 이미지 추가

Question

그래서 "The Loop"에 의해 전달 된 정보를 사용하여 캔버스 요소를 만들려고합니다. 다음은 내 코드입니다. 그것은 작동하지만 루프의 마지막 캔버스에서만 가능합니다.

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

self-referencing 익명 함수에서 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);