在图像上覆盖HTML5画布 [英] Overlay HTML5 canvas over image

问题描述

我希望有一个从数据库上传的图像，并且在同一位置上的相同大小是HTML5画布.

I want to have an image which is uploaded from my database and on top of it the exact same size in the same position is a HTML5 canvas.

我发现我使用的大多数解决方案都是JQuery/JavaScript，但是，如果可能的话，我希望使用CSS3提供类似的解决方案，因为图像是从数据库中输出的，因此页面上可以有多个图像，并且每个图像都会有一个画布.

Most of the solutions I have found I have been using JQuery/JavaScript, however I want a similar solution if possible just using CSS3 as the images are being outputted from a database and there can be more than one image on the page and each image will have a canvas.

我该如何实现?

推荐答案

是.

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

You can do this entirely in CSS, but you will have to add some specific HTML plumbing for each image.

如果您厌倦了多余的管道，则javascript可以为您完成大部分管道.

If you ever get tired of the extra plumbing, javascript could do most of the plumbing for you.

这是纯CSS版本的小提琴:

Here is a Fiddle of the CSS-only version:

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来获取图像.

Of course, in your version, you would replace the image src with your dynamic database call to fetch the image.

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

这篇关于在图像上覆盖HTML5画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！