1

我有一个网页，它在CANVAS元素中显示图像，该元素是 DIV 元素的子元素。我希望能够从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 回答