Javascript Windows 8.1:从画布导出图像_Javascript_Canvas_Windows 8_Export_Windows 8.1

Javascript Windows 8.1:从画布导出图像

javascript canvas windows-8

Javascript Windows 8.1:从画布导出图像,javascript,canvas,windows-8,export,windows-8.1,Javascript,Canvas,Windows 8,Export,Windows 8.1,我一直在用JavaScript为Windows8开发一个绘画程序，但我偶然发现了一个问题。我不知道如何从画布导出图像。我有点熟悉FileSavePicker，但我需要帮助我发现了这个，但我不知道如何创建“编码”变量：如果有更简单的方法，或者有人能解释一下，那将是一个很大的帮助。您可以使用canvas.toDataURL（）从画布创建图像然后，您可以在新窗口中打开该图像，如下所示： var win=window.open(); win.document.write("<

我一直在用JavaScript为Windows8开发一个绘画程序，但我偶然发现了一个问题。我不知道如何从画布导出图像。我有点熟悉FileSavePicker，但我需要帮助

我发现了这个，但我不知道如何创建“编码”变量：

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

您可以使用canvas.toDataURL（）从画布创建图像

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

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

var-win=window.open（）；
win.document.write（“”）；

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

以下是工作代码：

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


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“黄金”；
ctx.strokeStyle=“蓝色”；
ctx.线宽=5；
ctx.rect（50,50100100）；
ctx.fill（）；
ctx.stroke（）；
var win=window.open（）；
win.document.write（“”）；
}); // end$（函数（）{}）；

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

我过去喜欢Html和JavaScript，因为它很熟悉，但在我更多地了解Xaml和C之后，我开始更喜欢它。例如，您可以使用、

、

等等，而不是对界面的几乎每个部分都使用

。但对于这个特殊的问题，我很快就解决了

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

对于FielsavePokes，它很简单：

谢谢，我会在尝试得到的时候尝试一下。好的。我从画布上得到了图像文件。但是有没有办法使用fileSavePicker让用户保存图像？您可以直接尝试使用fileSavePicker，但根据画布内容的来源，您可能会遇到跨域安全问题。这里有一个使用fileSavePicker的链接：我真的不知道如何使用它。你能给我举个例子吗？也许有一种方法可以把它转换成比特并保存下来，这是可能的吗？