javascript - 无法让 Canvas 元素中的图像显示为 DIV 背景图像 (HTML/Javascript)？

Question

我有一个网页在 CANVAS 元素中显示图像，该元素是 DIV 元素的子元素。我希望能够从 CANVAS 元素中抓取图像并将其放入我将在屏幕上移动的 DIV 中。我正在使用下面的代码来尝试执行此操作。 Javascript 代码将包装在“url()”方法调用中的 canvas.toDataURL() 方法的值分配给 DIV 的背景图像 使用 JQuery CSS() 方法。我检查了 Chrome 调试器控制台，DIV 的 backround-image 属性 设置为 canvas.toDataURL() 返回的值方法。我可以在列为 DIV 的 Style 属性子项的 backgroundImage 字段中看到它。但是，如果我将 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 + ")");
                                ^