javascript 如何使用asp.net和phantomjs截取页面的屏幕截图并返回给客户端
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16165755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use asp.net and phantomjs to take a screen shot of a page and return it to the client
提问by zod
I want to be able to read a screen shot of a web site, and am attempting to use phantomjs and ASP.NET.
我希望能够阅读网站的屏幕截图，并且正在尝试使用 phantomjs 和 ASP.NET。
I have tried using page.render which would save the screen shot to a file. It works as a console application, but not when I call it from an asp.net handler. It is probably due to file permissions, since simple applications (like hello.js) work fine.
我曾尝试使用 page.render 将屏幕截图保存到文件中。它作为控制台应用程序工作，但当我从 asp.net 处理程序调用它时就不行。这可能是由于文件权限，因为简单的应用程序（如 hello.js）可以正常工作。
That is okay, my preference would be not to write to a file, but to deal with the bytes and return an image directly from the handler.
没关系，我的偏好不是写入文件，而是处理字节并直接从处理程序返回图像。
I am a bit lost as to how to do that. I noticed a method called page.renderBase64, but do not know how to use it.
我有点不知道如何做到这一点。我注意到一个叫做 page.renderBase64 的方法，但不知道如何使用它。
Currently I am using an IHttpHandler.
目前我正在使用 IHttpHandler。
There is a similar question here, but that person eventualy dropped phantomjs. I like the look of it and want to continue using it if possible. Running Phantomjs using C# to grab snapshot of webpage
这里有一个类似的问题，但那个人最终放弃了phantomjs。我喜欢它的外观，如果可能的话，我想继续使用它。 使用 C# 运行 Phantomjs 来抓取网页快照
回答by Andrey Borisko
According to your last comment you can do the following in phantom js file:
根据您的最后一条评论，您可以在 phantom js 文件中执行以下操作：
var base64image = page.renderBase64('PNG');
system.stdout.write(base64image);
in C#:
在 C# 中：
var startInfo = new ProcessStartInfo {
//some other parameters here
...
FileName = pathToExe,
Arguments = String.Format("{0}",someParameters),
UseShellExecute = false,
CreateNoWindow = true,
RedirectStandardOutput = true,
RedirectStandardError = true,
RedirectStandardInput = true,
WorkingDirectory = pdfToolPath
};
var p = new Process();
p.StartInfo = startInfo;
p.Start();
p.WaitForExit(timeToExit);
//Read the Error:
string error = p.StandardError.ReadToEnd();
//Read the Output:
string output = p.StandardOutput.ReadToEnd();
In your outputvariable you can read base64 returned from phantomJS and then do what you have planned with it.
在您的输出变量中，您可以读取从 phantomJS 返回的 base64，然后执行您的计划。
回答by idok
Use the wrapper for Phantomjs from here nreco wrapper
You can get js for rastor here : rastorize
您可以在此处获取 rastor 的 js：rastorize
And then the following code in C# would do the job.
然后 C# 中的以下代码将完成这项工作。
var phantomJS=new PhantomJS();
phantomJS.Run("rasterize.js", new[] { "http://google.com","ss.pdf" });
回答by zod
This question stemmed from my lack of understanding of what a base64 string actually was.
这个问题源于我对 base64 字符串实际上是什么缺乏了解。
In the javascript file that phantomjs runs, I can write the base64 image directly to the console like so:
在 phantomjs 运行的 javascript 文件中，我可以像这样将 base64 图像直接写入控制台：
var base64image = page.renderBase64('PNG');
console.log(base64image);
In the c# code that runs phantomjs, I can convert the console output back to bytes and write the image to the response, like so:
在运行 phantomjs 的 c# 代码中，我可以将控制台输出转换回字节并将图像写入响应，如下所示：
var info = new ProcessStartInfo(path, string.Join(" ", args));
info.RedirectStandardInput = true;
info.RedirectStandardOutput = true;
info.UseShellExecute = false;
info.CreateNoWindow = true;
var p = Process.Start(info);
p.Start();
var base64image = p.StandardOutput.ReadToEnd();
var bytes = Convert.FromBase64CharArray(base64image.ToCharArray(), 0, base64image.Length);
p.WaitForExit();
context.Response.OutputStream.Write(bytes, 0, bytes.Length);
context.Response.ContentType = "image/PNG";
This seems to avoid file locking issues I was having.
这似乎避免了我遇到的文件锁定问题。
回答by Erik
Using CasperJS coupled with PhantomJS , I've been getting beautiful shots of webpages.
将 CasperJS 与 PhantomJS 结合使用，我得到了漂亮的网页照片。
var casper = require('casper').create();
casper.start('http://target.aspx', function() {
this.capture('snapshot.png');
});
casper.run(function() {
this.echo('finished');
});
I highly recommend you check out that tool. I'm still not sure how to do the post-backs though..
我强烈建议您查看该工具。我仍然不确定如何进行回传。。
回答by Akila Adikari
Set the 'WorkingDirectory' property of ProcessStartInfo object in order to specify the saving location of the file.
设置 ProcessStartInfo 对象的“WorkingDirectory”属性以指定文件的保存位置。
