在圖像上覆蓋HTML5畫布

我想要從我的數據庫上傳圖像，並且在同一位置上的完全相同的大小是HTML5畫布。在圖像上覆蓋HTML5畫布

我發現的大多數解決方案我一直在使用JQuery/JavaScript，但是如果可能的話，我想要一個類似的解決方案，只需使用CSS3從圖像數據庫中輸出圖像，並且頁面上可以有多個圖像每個圖像都會有一個畫布。

我該如何做到這一點？

來源

2013-02-12 Colin747

是的。

您可以完全在CSS中完成此操作，但您必須爲每個圖像添加一些特定的HTML配置文件。

如果你厭倦了額外的管道工程，javascript可以爲你做大部分管道工程。

這裏是唯一的CSS的版本的小提琴：

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

來源

2013-02-12 23:37:56 markE

有沒有一種方法，使這項工作對於圖像列表不知道的圖像尺寸提前？從外包裝中刪除寬度/高度使得所有這些雙div包裝中的所有圖像和畫布都呈現在一個點上。 – TheAtomicOption 2017-09-20 23:13:39

想通了。我使用的是Flask，所以Python可以讀取圖像的尺寸，Jinja可以爲外部的Wrapper div設置一個內聯樣式，等於這個尺寸。 – TheAtomicOption 2017-09-21 20:02:20

Possible duplicate。

根據數據庫中有多少圖像，您可以爲圖像文件的名稱分別設置單獨的畫布編號（例如canvas #foo { background:url(foo.jpg) }）。我會加載這個在一個單獨的樣式表。 :)

雖然如果您的數據庫是動態的，它可能會更容易維護一個Javascript解決方案。幾行javascript就足夠了，而不是不斷用新名稱更新樣式表。較少錯誤錯字傾向也是如此。

來源

2013-02-12 22:32:12

在圖像上覆蓋HTML5畫布

回答

相關問題