我正在尝试将我的 HTML Canvas 保存到我可以成功执行的文件,但它没有保存我拖到 Canvas 中的任何对象。
因此,通过使用 Draggable JQuery,我可以愉快地在屏幕上移动我的对象并将其放置在我的 Canvas 上。当我使用 Canvas.ToDataURL()
保存 Canvas 时,它不会保存我拖动的对象(并且在 jsFiddle 中对我的 Canvas 做了一些奇怪的事情,它似乎改变了我的 Canvas 的颜色?) .
要查看“工作”示例,请访问我的 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 该对象是它的上下文的一部分,但不知道如何,而且我自己的搜索一无所获。
最佳答案
来自 https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
You can't just draw HTML into a canvas. Instead, you need to use an SVG image containing the content you want to render. To draw HTML content, you'd use a element containing the HTML, then draw that SVG image into your canvas.
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;
关于javascript - 无法保存带有可拖动对象的 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19444447/