Javascript 无法使用可拖动对象保存画布

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

所以，通过使用可拖动JQuery，我可以愉快地在屏幕上移动我的对象，并将其放置在画布上。当我使用

canvas.ToDataURL（）

保存画布时，它不会保存我拖动的对象（并且在JSFIDLE中对我的画布做了一些奇怪的事情，它似乎改变了我画布的颜色？）

要查看“工作”示例，请访问我的JSFIDLE

请将绿色框拖到蓝色框上，然后单击“保存”按钮。结果将显示在下面（仅一个橙色框）

HTML

CSS

---

如何保存拖动的对象？我假设我必须告诉画布，该对象是其上下文的一部分，但不知道如何，我自己的搜索也没有结果

那是因为你的可拖动对象不在罐子里。 它们是简单的html元素。 它将只保存使用canvas方法创建的对象

要在画布上创建html元素，您必须使用svg。 Mozilla展示了一个很好的方法来实现这一点，但是您需要在之前将所有css都内联到css中。

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

toDataUrl

。

来自

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

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var data=“”+
"" +
"" +
“我喜欢奶酪”+
"" +
"" +
"";
var DOMURL=self.URL | | self.webkitURL | | self；
var img=新图像（）；
var svg=newblob（[data]，{type:“image/svg+xml；charset=utf-8”}）；
var url=DOMURL.createObjectURL（svg）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
};
img.src=url；

在画布上有一个div，并不意味着它在画布中。我无法向画布添加任何内容。例如，如果我执行

html代码

，则画布根本不显示！如果将innerText指定给画布，则它将仅在与画布元素不兼容的表单浏览器中显示。就像老探险家一样。要绘制到画布中，只需使用脚本。您有创建文本的方法。看看api。这很有趣，但是，我恐怕看不出当屏幕上有可拖动的项目时，这会有什么帮助。这是一个您应该手动执行的操作（听drop，计算div的偏移量，创建svg并在画布中绘制它）。。。这很烦人，但可能是嗯。。。有些事情比我希望的要复杂，但很好，谢谢。

    <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" />

    $(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;
    }

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

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

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;