在图像上叠加HTML5画布

Question

我想要一个从数据库上传的图片，在其上方，同样大小、同样位置有一个HTML5画布。

大多数解决方案都是使用JQuery / JavaScript实现的，但如果可能的话，我希望只使用CSS3来实现类似的解决方案，因为这些图片是从数据库中输出的，并且页面上可能会有多个图片，每个图片都会有一个画布。

我该如何实现这个功能？

- Colin747

Answer 1

可以。

你可以完全使用CSS实现这个效果，但是你需要为每个图片添加一些特定的HTML标记。

如果你厌倦了额外的HTML标记，JavaScript可以帮您完成大部分工作。

这是CSS-only版本的Fiddle:

http://jsfiddle.net/m1erickson/g3sTL/

HTML代码:

<div class="outsideWrapper">
    <div class="insideWrapper">
        <img src="house-icon.jpg" class="coveredImage">
        <canvas class="coveringCanvas"></canvas>
    </div>
</div>

当然，在您的版本中，您将使用动态数据库调用替换图像src以获取图像。

CSS：

.outsideWrapper{ 
    width:256px; height:256px; 
    margin:20px 60px; 
    border:1px solid blue;}
.insideWrapper{ 
    width:100%; height:100%; 
    position:relative;}
.coveredImage{ 
    width:100%; height:100%; 
    position:absolute; top:0px; left:0px;
}
.coveringCanvas{ 
    width:100%; height:100%; 
    position:absolute; top:0px; left:0px;
    background-color: rgba(255,0,0,.1);
}

- markE

---

有没有办法在不预先知道图像大小的情况下，使其适用于图像列表？从外部包装中删除宽度/高度会使所有这些双重div包装器中的图像和画布在一个位置呈现。 - TheAtomicOption

解决了。我正在使用Flask，因此Python可以读取图像尺寸，Jinja可以为outsideWrapper div设置与维度相等的内联样式。 - TheAtomicOption

重要的侧面说明：CSS 的宽度和高度与 <canvas width="100" height="100> 不同。如果您要使用画布进行绘制，它将无法按预期工作。更多详情请参见 https://dev59.com/1GUo5IYBdhLWcg3w9jR4 和 https://dev59.com/RnE85IYBdhLWcg3w1HOF。 - yeya

Answer 2

可能是重复内容。

根据数据库中包含的图像数量，您可以为每个图像使用名称（例如canvas #foo { background:url(foo.jpg) }）单独设置画布 ID。我会在一个单独的样式表中加载它。 :)

如果您的数据库是动态的，使用Javascript解决方案可能会更容易维护。几行JavaScript就足够了，而不是不断更新具有新名称的样式表。也更少出现错误打字错误。

- Adrian Larson