I am looking for a library to take a PNG, place it alongside some HTML and then re-render it as a PNG.
我正在寻找一个库来获取PNG，将它与一些HTML放在一起，然后重新呈现为PNG。
Example code:
示例代码:
var renderingTool = require('renderingTool');
var newPng = renderingTool.pngoutBuffer('' +
'<div style="border-left: 12px solid red">' +
'<img src="src="data:image/png;base64,iVBORw0KGgoAAA..." />' +
'</div>'
);
This would take a PNG image, add a red border on the left and re-render it as a PNG.
这将获取一个PNG图像，在左边添加一个红色边框，并将其重新呈现为PNG。
I am aware of Phantom.js and gm (which uses GraphicsMagick). I couldn't figure out how to do this with Phantom and with GM it is very slow even for 16px x 16px image (250ms per image). I am hoping to get down to ~10ms to do this.
我意识到幽灵的存在。js和gm(使用GraphicsMagick)。我不知道如何用Phantom和GM来做这件事，即使是16px x16px的图像(每幅图像250ms)也很慢。我希望能减少到10毫秒做这件事。
EDIT:
编辑:
NOTE: I edited the code above to show the original image is already in memory as a buffer (in the above I converted it to base64).
注意:我编辑了上面的代码，以显示原始图像已经作为缓冲区存储在内存中(在上面我将它转换为base64)。
Also, can phantom be given HTML CODE instead of a URL? All the examples I have seen are with a URL, but giving actual code would be much better.
另外，可以给phantom提供HTML代码而不是URL吗?我看到的所有示例都带有URL，但是提供实际代码会更好。
1 个解决方案
#1
3
I'm pretty sure phantomJS is the best available approach for this, broady speaking.
我很确定phantomJS是这方面最好的方法。
I am hoping to get down to ~10ms to do this.
我希望能减少到10毫秒做这件事。
I believe this to be unachievable given the latency for phantomJS to even download the remote image will exceed 10ms by at least 1 order of magnitude (~250ms for a pretty fast and nearby server) and as much as 3 orders of magnitude for a slow/far away server. Keep in mind there's a minimum latency for network requests due to the speed of light.
我认为这是不可能实现的，因为phantomJS甚至下载远程图像的延迟至少会超过10ms的一个数量级(对于一个非常快速和邻近的服务器来说，大约是250ms)，而对于一个速度较慢/距离较远的服务器来说，则会超过3个数量级。记住，由于光速，网络请求的延迟是最小的。
If you just want to add a border or do simpler manipulations like crop, rotate, add text, etc, then gm is all you need and that will be much faster than phantomJS, but your bottleneck is still likely to be actually downloading a remote image from the web. If you already have the image file locally on the server's filesystem, then just doing a gm modification you may have a shot of getting in the ballpark of your latency hopes.
如果你只是想添加一个边框或者做一些简单的操作，比如剪切、旋转、添加文本等等，那么gm就是你所需要的，这将比phantomJS要快得多，但是你的瓶颈仍然可能是从web上下载一个远程图像。如果您已经在服务器的文件系统上本地拥有了映像文件，那么只需进行gm修改，您就可能有机会了解延迟期望的大致情况。
#1
3
I'm pretty sure phantomJS is the best available approach for this, broady speaking.
我很确定phantomJS是这方面最好的方法。
I am hoping to get down to ~10ms to do this.
我希望能减少到10毫秒做这件事。
I believe this to be unachievable given the latency for phantomJS to even download the remote image will exceed 10ms by at least 1 order of magnitude (~250ms for a pretty fast and nearby server) and as much as 3 orders of magnitude for a slow/far away server. Keep in mind there's a minimum latency for network requests due to the speed of light.
我认为这是不可能实现的，因为phantomJS甚至下载远程图像的延迟至少会超过10ms的一个数量级(对于一个非常快速和邻近的服务器来说，大约是250ms)，而对于一个速度较慢/距离较远的服务器来说，则会超过3个数量级。记住，由于光速，网络请求的延迟是最小的。
If you just want to add a border or do simpler manipulations like crop, rotate, add text, etc, then gm is all you need and that will be much faster than phantomJS, but your bottleneck is still likely to be actually downloading a remote image from the web. If you already have the image file locally on the server's filesystem, then just doing a gm modification you may have a shot of getting in the ballpark of your latency hopes.
如果你只是想添加一个边框或者做一些简单的操作，比如剪切、旋转、添加文本等等，那么gm就是你所需要的，这将比phantomJS要快得多，但是你的瓶颈仍然可能是从web上下载一个远程图像。如果您已经在服务器的文件系统上本地拥有了映像文件，那么只需进行gm修改，您就可能有机会了解延迟期望的大致情况。