Canvas in bootstrap 'thumbnail'

Question

Я пытаюсь поместить элемент холста внутри класса «миниатюры» div (из бутстрапа). Внутри этого холста я хочу нарисовать изображение, а затем нарисую что-нибудь над ним. Проблема заключается в том, что с моим решением изображение внутри холста не ведет себя «естественно», как при использовании тега img. Это изображения иллюстрируют то, что я пытаюсь сказать:

Normal Image:

холст Изображение:

Вот код, который я использовал для каждого из них.

Normal:

<li class="span3"> 
    <div class="thumbnail"> 
     <img src="Images/pasta1.jpg" data-src="holder.js/300x200" alt=""> 
     <h3>PASTA 1</h3> 
     <p>Pasta a la xxx, con salsa de yyy en zzz.</p> 
    </div> 
</li> 

Canvas:

<li class="span3"> 
<div class="thumbnail"> 
    <canvas id="canvas" style="width: 100%; height: 100%;"></canvas> 
    <h3>PASTA 1</h3> 
    <p>Pasta a la xxx, con salsa de yyy en zzz.</p> 
    </div> 
</li> 

<script> 
function drawImageTime(canvas_id,image_src,percent) 
{ 
    var canvas = document.getElementById(canvas_id); 
    var context = canvas.getContext('2d'); 
    var image = new Image(); 

    image.onload = function() 
    { 
     context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height); 
     context.fillStyle = "rgba(0, 200, 100, 0.33)"; 
     context.fillRect(0,0,canvas.width*(percent/100),canvas.height); 
    }; 
    image.src = image_src; 
} 

drawImageTime('canvas','Images/pasta1.jpg',73);  
</script> 

Я попытался дать тот же стиль изображений на холст элементов, но это не сработало. Также вручную изменение размера элемента холста не сработало. Есть идеи? Благодарю.

Answer 1

Итак, у меня, наконец, есть решение моей проблемы, за исключением 1 вещи, которую я просто не могу понять. Я оставляю холст-заполнители внутри каждого миниатюры бутстрапа, и у меня есть эти функции.

• Розыгрыш изображение и 'полоса загрузки' в брезентовой заполнителем

  function drawImageTime(canvas_id,image_src,percent) 
      { 
       var canvas = document.getElementById(canvas_id); 
       var context = canvas.getContext('2d'); 
       var image = new Image(); 
  
       image.onload = function() 
       { 
        canvas.width = $('#'+canvas_id).parent().width(); 
        canvas.height = $('#'+canvas_id).parent().width()*(image.height/image.width); 
        context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height); 
        context.fillStyle = "rgba(75, 100, 200, 0.33)"; 
        context.fillRect(0,0,canvas.width*(percent/100),canvas.height); 
       }; 
       image.src = image_src; 
      } 
  

• Даже из высот всех миниатюр

  function equalHeight(group) { 
       tallest = 0; 
       group.each(function() { 
        thisHeight = $(this).height(); 
        if(thisHeight > tallest) { 
         tallest = thisHeight; 
         console.log("Tallest = " + tallest); 
         //alert(1); 
        } 
       }); 
       group.each(function() { $(this).height(tallest); }); 
      } 
  

Я вызываю функцию equalHeight на $(document).ready, но это не изменяет размер миниатюр. Однако, если я добавлю предупреждение() в код (я его прокомментировал в коде, который я разместил), он отлично работает.

Я не понимаю! Есть идеи?