引导程序“缩略图”中的画布答案

【问题标题】：Canvas in bootstrap 'thumbnail'引导程序“缩略图”中的画布
【发布时间】：2013-12-24 13:44:12
【问题描述】：

我正在尝试将画布元素放入“缩略图”类 div 中（来自引导程序）。在这个画布中，我想画一个图像，然后在上面画一些东西。问题是，在我的解决方案中，画布内的图像不像我使用 img 标签时那样“自然”地表现。这些图片说明了我想说的：

普通图像：

画布图片：

这是我为每个人使用的代码。

正常：

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

画布：

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

我尝试为画布元素提供相同样式的图像，但没有奏效。手动调整画布元素的大小也不起作用。有任何想法吗？谢谢。

【问题讨论】：

标签： twitter-bootstrap canvas image-resizing

【解决方案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); });
    }

我在$(document).ready 上调用equalHeight 函数，但它不会调整缩略图的大小。但是，如果我在代码中添加一个 alert()（我在我发布的代码中将它注释掉了），它就可以完美地工作。

我不明白！有什么想法吗？

【讨论】：