0

我正在尝试将我的 HTML 画布保存到我可以成功执行的文件中，但它没有保存我拖到画布中的任何对象。

因此，通过使用 Draggable JQuery，我可以愉快地在屏幕上移动我的对象并将其放置在我的画布上。当我使用它保存画布时，Canvas.ToDataURL()它不会保存我拖动的对象（并且还在 jsFiddle 中对我的画布做了一些奇怪的事情，它似乎改变了我的画布的颜色？）。

要查看“工作”示例，请访问我的 jsFiddle http://jsfiddle.net/JVSFS/74/

请简单地将绿色框拖到蓝色框上，然后单击保存按钮。结果将显示在下方（只是一个橙色框）。

HTML

    <canvas id="MyCanvas" class="canvas"></canvas>

    <div class="popup_click">
        <div id="popup_title">Drag</div>
    </div>

    <asp:HiddenField ID="hideMe" runat="server" />

    <asp:Button runat="server" OnClick="ClickMe" Text="Click" OnClientClick="SaveMe()" />

<button onclick="SaveMe()">Try it</button>

<p>Results: </p>
<img id="myImage" />

JavaScript

    $(document).ready(function () {
        $('.popup_click').show(0).draggable();
    });

    function SaveMe() {
        var canvas = document.getElementById("MyCanvas");
        var context = canvas.getContext("2d");
        context.fillStyle = "orange";
        context.fillRect(0, 0, 100, 100);

        var image = canvas.toDataURL("image/png");

        document.getElementById("myImage").src = image;


        document.getElementById("hideMe").value = image;
    }

CSS

.popup_click {
            background: #80FF80;
            width: 50px;        }

        .canvas {
            width: 100px;
            height: 100px;
            background-color: #0FC;
}

如何让拖动的对象保存？我假设我必须告诉 Canvas 该对象是它的上下文的一部分，但不知道如何并且我自己的搜索一无所获。

4

2 回答 2

1

那是因为您的可拖动对象不在画布中。它们是简单的 html 元素。它只会保存使用画布方法创建的对象。

任何方式to create html elements on canvas you have to use svg。Mozilla 展示了一个很好的方法，但你需要先让所有的 css 内联 css。
Mozilla 解释

toDataUrl无论如何，在您的画布上使用 svg 时，由于安全策略，您将无法使用。

于 2013-10-18T08:01:32.743 回答
1

来自https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

您不能只将 HTML 绘制到画布中。相反，您需要使用包含要呈现的内容的 SVG 图像。要绘制 HTML 内容，您将使用包含 HTML 的元素，然后将该 SVG 图像绘制到您的画布中。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                 "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;
于 2013-10-18T08:07:19.370 回答