在图像上覆盖 HTML5 画布

2022-01-17 00:00:00 html css html5-canvas

我想要一张从我的数据库上传的图片，在它上面，相同大小的相同位置是 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.

我怎样才能做到这一点?

How can I achieve this?

推荐答案

是的.

您可以完全在 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 版本的 Fiddle:

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

相关文章