1

DIV 要素の子であるCANVAS要素に画像を表示する Web ページがあります。CANVAS要素から画像を取得し、画面上を移動する DIV に配置できるようにしたいと考えています。以下のコードを使用して、これを実行しようとしています。Javascript コードは、JQuery CSS() メソッドを使用して、「url()」メソッド呼び出しでラップされたcanvas.toDataURL()メソッドの値をDIVの背景画像に割り当てます。Chrome デバッガー コンソールで確認したところ、DIV のbackround-imageプロパティがcanvas.toDataURL()メソッドによって返された値に設定されています。backgroundImageで確認できますDIV のStyleプロパティの子としてリストされているフィールド。ただし、Watch 式を$("#easter-egg-cat-1").css("backround-image")に設定すると、値として「none」が返されます。

いずれにせよ、DIV に背景画像が表示されません。これはなぜですか、どうすれば修正できますか?

<!-- THESE ARE THE WEB PAGE ELEMENTS INVOLVED -->
<div id="viewer-container">
    <!-- This DIV is where any warning messages will be displayed if a cat's face can not be 
          detected properly in the uploaded photo.  -->
    <div class="kittydar-viewer" id="kittydar-viewer"></div>
    <div id="viewer">
        <canvas id="preview">
        </canvas>
        <canvas id="annotations">
        </canvas>
    </div>
    <!-- This is where progress messages from the KittyDar detector are displayed as it searches for a cat face in the uploaded picture. -->
    <div class="kittydar-progress" id="kittydar-progress">(none)</div>
</div>


// This is the script that grabs the image from the CANVAS element and sets the
//  the desired DIVs background-image CSS property to the URL provided by the
//  CANVAS element.
var previewCanvasAsUrl = $("#preview").get(0).toDataURL();

$("#easter-egg-cat-1").css("backround-image", "url(" + previewCanvasAsUrl + ")");
4

1 に答える 1

1

タイプミスがあります：

$("#easter-egg-cat-1").css("background-image", "url(" + previewCanvasAsUrl + ")");
                                ^
于 2013-05-10T11:13:53.917 に答える