在图像上叠加HTML5画布

Question

我希望有一个从我的数据库上传的图像,在它上面,相同位置的完全相同的大小是HTML5画布.

我发现大多数解决方案我一直在使用JQuery/JavaScript,但是我想要一个类似的解决方案,如果可能只使用CSS3,因为图像是从数据库输出的,页面上可以有多个图像,每个图像都会有画布.

我怎样才能做到这一点？

Answer 1

是.

您可以完全在CSS中执行此操作,但您必须为每个图像添加一些特定的HTML管道.

如果你厌倦了额外的管道,javascript可以为你做大部分的管道工作.

这是CSS-only版本的小提琴:

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