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

我试图将我的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该对象是其上下文的一部分，但不知道如何和我自己的搜索没有任何结果。

来源

2013-10-18 Dave

有在画布上一个div，没有办法得到它在画布上 –

从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-18 08:07:19

这很有趣，但是恐怕我不明白在屏幕上有可拖动的项目时这会如何提供帮助。 – Dave

这是一个你应该手动进行的操作（听下拉，计算div的偏移量，创建svg并在画布内绘制它）......这很烦人，但可能是 –

hmmmm ...有些比我希望的更复杂但很好，谢谢。 – Dave

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

任何方式to create html elements on canvas you have to use svg。 Mozilla显示了很好的方式来这样做，但你需要获得所有的CSS以内联css之前。
mozilla explanation

反正跟你画布，你将无法使用toDataUrl因为安全策略的使用SVG。

来源

2013-10-18 08:01:32 Dvir

我不能添加任何东西到我的画布里面。例如，如果我''那么画布根本不显示！ – Dave

如果您指定innerText到画布，它将仅显示与浏览器不兼容的画布元素。像旧的探险家。对于绘制到画布中，您只能使用脚本。你有创建文本的方法。看看api吧。 – Dvir

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

回答

相关问题