0

我一直在用 JavaScript 为 Windows 8 工作或某种绘画程序，但我偶然发现了一个问题。我不知道如何从画布中导出图像。我对 FileSavePicker 有点熟悉，但我需要帮助。

我找到了这个，但我不知道如何创建“编码”变量：在 Windows 8 中将画布保存为图像

如果有更简单的方法或者有人可以解释它，那将是一个很大的帮助。

4

2 回答 2

1

您可以使用 canvas.toDataURL() 从画布创建图像。

然后您可以在新窗口中打开该图像，如下所示：

    var win=window.open();
    win.document.write("<img src='"+canvas.toDataURL()+"'/>");

您的用户可以在该新窗口中执行通常的右键单击保存。

这是工作代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.fillStyle="gold";
    ctx.strokeStyle="blue";
    ctx.lineWidth=5;
    ctx.rect(50,50,100,100);
    ctx.fill();
    ctx.stroke();

    var win=window.open();
    win.document.write("<img src='"+canvas.toDataURL()+"'/>");


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-08-27T21:51:20.570 回答
0

最终，为了解决使用 Html 制作 Windows 8 应用程序的几个问题，我改用 C# 和 Xaml。

我曾经喜欢 Html 和 JavaScript，因为它们很熟悉，但在我了解了更多有关 Xaml 和 C# 之后，我开始更喜欢它。例如，您可以使用 a、 、、等，而不是使用<div>几乎每个界面部分。但是对于这个特殊的问题，我很快就解决了。<Grid><Border><StackPanel>

public async void Preview_Update()
{
    RenderTargetBitmap bitmap = new RenderTargetBitmap();
    await bitmap.RenderAsync(canvas);
    image.Source = bitmap;
}

对于 FileSavePicker，它非常简单：FileSavePicker

于 2015-01-12T14:45:53.763 回答