Question

我想询问是否可以在服务器端生成画布图像。我想知道是否有人已经有过这方面的经历。

为什么我需要这样的东西？我打算创建客户端画布，它将包含一些图像+形状（基于某些数据），用户必须能够例如绘制新形状，将所有形状一起下载为PNG，删除形状......这一切都应该可行。

但是，应该还可以选择从客户端的列表中选择图像（想象数据网格视图+复选框），并将所有选定的图像作为单个ZIP文件一起下载。

要求是，图像应该以与客户端画布（图像+形状）相同的方式呈现。所以我想采用在客户端生成canvas的JavaScript代码，并在服务器端也使用它。请注意，整个应用程序将在ASP.NET（IIS）上运行。

作为第一选择，我首先想到的是：

从客户端到服务器的请求（ID列表，+一些属性，如ZIP文件名）
ASP.NET服务器向NodeJS执行图像请求（+参数）
NodeJS将生成画布并为每个请求返回一个图像
ASP.NET服务器将打包从NodeJS返回的所有图像并将它们返回给客户端

问题1：这会有效吗？

问题2：我可以以某种方式摆脱NodeJS吗？当前的Web应用程序是在ASP.NET MVC上构建的，它运行在IIS上，我不想让服务器与另一个Web服务器混乱。

问题3：也许我可以通过在客户端上创建隐藏的画布元素（将被呈现？）来摆脱NodeJS，通过ajax将其图像从客户端发送到服务器，然后让客户端将它们下载为ZIP。（网络带宽不是问题，它将在快速的本地网络上）

感谢您分享您的经验！

更新

我发现的另一种可能性是使用PowerShell在IE中打开页面。这是我的工作样本（但我不确定这是否是最佳解决方案）。

 $ie = new-object -com "InternetExplorer.Application"
 $ie.navigate("http://localhost:8080/img/id") # or whatever page that contains canvas
 $ie.visible=$false
 while($ie.Busy) {Start-Sleep -m 500}
 $doc=$ie.document
 while(!$doc)
 {
    Write-Host -NoNewLine ".";
    Start-Sleep -m 50
    $doc=$ie.document
 }
 $canvas = $doc.getElementByID("canvasID")
 Start-Sleep -m 1000 # sometimes need additional time to render canvas background image
 $img = $canvas.toDataURL("image/png", 1)
 $base64data = $img.Split("{,}")[1]
 $bytes  = [System.Convert]::FromBase64String($base64data)
 [io.file]::WriteAllBytes('c:\temp\CanvasImage.png', $bytes)

Answer 1

使用PHP ECHO编写HTML，Javascript代码，以便您可以注入PHP变量值。例如

<?php

echo "<html>

<body>

<canvas id="drawing"></canvas>

<script>
//Your codes.
</script>

</body>
</html>



";

?>

是否可以在服务器端使用HTML5画布生成图像？

1 个答案: