Question

我有一个网页，在 CANVAS 元素中显示图像，该元素是DIV元素的子元素。我希望能够从 CANVAS 元素中获取图像并将其放入DIV中，我将在屏幕上移动。我正在使用下面的代码尝试这样做。 Javascript代码将 canvas.toDataURL（）方法的值（包含在“url（）”方法调用中）分配给 DIV的背景图片 使用JQuery CSS（）方法。我检查了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 + ")");

Answer 1

你有一个错字：

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

无法在Canvas元素中获取图像以显示为DIV背景图像（HTML / Javascript）？

1 个答案: