Question

我一直在用JavaScript编写Windows 8的绘图程序，但我偶然发现了一个问题。我不知道如何从画布导出图像。我对FileSavePicker很熟悉，但我需要帮助。

我找到了这个，但我不知道如何创建“编码”变量：Saving a Canvas as an image in Windows 8

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

Answer 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>

Answer 2

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

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

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

对于FileSavePicker，它非常简单：FileSavePicker

Windows 8.1：从画布导出图像

2 个答案: