web-dev-qa-db-ja.com

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

私のデータベースからアップロードされた画像があり、その上に、同じ位置に正確に同じサイズのHTML5キャンバスがあります。

私が見つけたほとんどのソリューションはJQuery/JavaScriptを使用していますが、画像がデータベースから出力され、ページに複数の画像があり、各画像がキャンバスを持っています。

どうすればこれを達成できますか？

htmlcsshtml5-canvas
16
Colin747

はい。

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

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

以下は、CSSのみのバージョンのFiddleです。

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

可能性のある重複 。

データベースにある画像の数に応じて、画像ファイルの名前（canvas #foo { background:url(foo.jpg) }など）を使用して、それぞれに個別のキャンバスIDを設定できます。これを別のスタイルシートにロードします。 :)

データベースが動的である場合でも、おそらくJavaScriptソリューションを維持する方が簡単でしょう。スタイルシートを新しい名前で常に更新するのではなく、数行のJavaScriptで十分です。もっと少なく エラー タイプミスも起こりやすい。

3
Adrian Larson