オーバーレイHTML5キャンバス画像

Question

私は自分のデータベースからアップロードされた画像を持っています。その上に同じ位置の同じサイズがHTML5キャンバスです。

私はJQuery/JavaScriptを使っていましたが、イメージがデータベースから出力され、ページに複数のイメージがある可能性があるので、それぞれの画像はキャンバスを持ちます。

どうすればこの問題を解決できますか？

Answer 1

はい。

これはCSSで完全に行うことができますが、画像ごとに特定のHTML配管を追加する必要があります。

余分な配管に疲れたら、javascriptで配管のほとんどを行うことができます。

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

HTML：：ここで

はCSSのみのバージョンのフィドルあるもちろん

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

Answer 2

Possible duplicate。

データベースに保存されている画像の数によっては、画像ファイルの名前をそれぞれ別のキャンバスID（例：canvas #foo { background:url(foo.jpg) }）にすることができます。これを別のスタイルシートにロードします。 :)

データベースが動的であれば、Javascriptソリューションを維持する方が簡単でしょう。スタイルシートを常に新しい名前で更新するのではなく、数行のjavascriptで十分です。 エラー もあまりよくありません。