node.jsでbase64形式のWebページスクリーンショットを撮る

Question

node-webshotライブラリを使用して、node.jsでbase64形式のWebページスクリーンショットを作成しようとしています。

私がしようとした場合：

var webshot = require('webshot'); 

webshot('google.com', 'google.png', function(err) { 
    // screenshot now saved to google.png 
}); 

それがうまく機能し、スクリーンショットが.pngの形式で作成されます。

iVBORw0KGgoAAAANSUhEUgAAAGQAAAMACAYAAADSb8KFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAPxUlEQVR4nO3ZfZBV5WHH8d/tXlm6uAIWl7Bk07IUpDDUxUp1qFkTumqEUZl03cb4MqXWkAkJqPEFS1YbaKymVWgqTFpfmAroqKmDWrGBjVFUpNIEMozUwLg0pS4DxbArL+7K7tz+sfLmSwIY43em389fyzmX53nO+d5z7t2zhbFjx5by/9yyT534cS/hoN/4uBegIxU/7gUQTPnvPR/3Eg7yCoExCIxBYAwCYxAYg8AYBOaYfw8p1dbnS5c05PeG/lb6lRfTtXdn/mvDC7nv/uXpKBQ+ijUmSeqvviUX1mzLvOZ/SttHOM8BpRFXZMn8L+TkvJV//+5XMufJHQf3XTJncf7sD07OW1t/kMYv3/WBYzTc9N1cO3FYfr5uSa6Ytfio9h/TFVIad0UWNk/NhFE16dfdntdf35mcVJ2x9U257dYvHstQx6xqyNAMqhmSAR/pLIfZtCXFqprU1IzM+U2XHNxcKtXloj8+LTU1NalKxy8c4vfrxqZmyJCM+u1Tjnr/UQcplWrz9akTU5GebFj2t5l23ezMmTM7X7tqbtbv7EnFsM/k0tqP7rHY/u4kPd3pPNr1VjdmwaIFaTzONRUKL+Sx57clSSrHfDYNpXfGOffzGVWZJF1pWXLvLxyjq7snSfJ2d2+4qqqq999/2Lajv2Wdfk5GVyb7Nj+Zux7feNjCWzP/wRfzD18em76fHJq0tuWsxpn54ufqUlnWO92W1csy556nkyT9R1+cmVMnZdigPkmS3W3r8+C352dNRyH9xzXmxr/4XKorypKefdnVVZ5++zbmjuvvPGIpper6zLr2TzNqUMXBMRb95fyse9etrJhijrrg+3jkgWdyTcNlqSyOzMVNg9Py6I40TToz5UnS/qM8e+rdefE7f5Q+u17JzRMvT0uhkLOvuz/zLq/LW1tX5Kk3e8eprG3K91+cniGVxXTv3pqHb52aO1p2vGe+Ut1VR3+FDB9ek7L05D+eXvaefYV1izJj2nVZtKot/etnZtrkulTsejXLFi3N6s1vZtiEptx+dX1KpbNy4w1TMmxQV9Y+tTSPPLMh5dV1mTb366kunZUbZ0xOdXFnnnlkaVZs3J2BFWXpc1Lf9D1itjGZfevUjBrUldXLlmbpU+tTVl2XGX83Pf1LpVSPOysNDfU5Z3xVylKWoePPSX1DQ+rHVR9TjCTJusfy4//t/fH0iy5JqTQiF5w5JEmy5dmn8tyTL2dPsZjyU05L45UjUypV5fPnn5HyYjG7//NHOfiErHJITu7cld3dSbGyJpfd3Jyq0pFXbql0Yf7l/pnHcIXs707Sld3bDwxQm9kLmzOi4sALevLqstvy6piRSdpy7/W3Z02hkNJza1Mxb37qzjw747d0pjrJhqW3Z2FLW5KW/CxzcsPEU3P+5X1TnWT90puyeFUhebolxW/dm4mDjnyTV5x7bkb0SXauX5kfbGhL37Tmh8OHZ/Ko0zJp+PAMmz4tI8oOvb5uytTUJUnbiqxa99BRH26SFAqb8/hzm3JO48hUjjo75376xJxamSTtWbH4iRR2FPLET67OtNMGZOyk85IHkjOG9O5fft8jyS1fS5J0b12e8ZNnpXTJXVnX3JDiSQMy8l1zjftqU0YWj/lbVkU+NXpo0taW5I28/MLqtJ+Y7K+oyYS6mpSfcOi93HXwoDqyafu+1J2UnNCvb5KebGt9PUnv7aX9zd7T3ft+6cmO/zk025t7u5LBR66gckC/JMmguqY01x2+Z3f257UsuGV2+mVv9g6+KN+ecXZe+M4388T2pN/eQ3Mei5UP/TDtjSMzoPzU3Nw8NJVJuretzqObeoe7+59X56q7JqXydz+bW+9IBiTp3vpsFmwuZPo7Y7z183duT+tfy540ZMDbyQc9Xz7qIK9t2JR9U0Zk7KQvpHblnWktdKTloXvSkqTU/+KcMb8mSXJC8b1DfmJgRZJi+pyQJGUZ+MkBSWvvB13fit6IZXnvvpP6lSc9R461f2/vhs3L5ua2x1uTJNXjLs7kMyqy8Y2ko6MtHUlK6U6f9El3x+vpaCuk4zhiJElh84I8u/WqTKkp5pQhvd/xfvr9f82OA59XK+/Ly+2TMmHAyDRO6t20/rHHjhzk4Ckp/6XzHfVnSKH1e3l4dVsycGyaF96Rr1zRmIaGC3LF1Tdl3p1T0idJ9/7O/PgnP0tSnam3/nnG1dbmgqvnpH5wsnvj2jy7cnV2Jhl/2Y25eFxtRjdMzVfPq0l6tueVJc+kLcn4K7+RqRc05NLrbs/E6rKk+8gj27f8uWxPMmLSl3Jp/ejUntWYGdOnZMKE0zOo/bCX7t2StRvWZssbR3uEH+yx5a8c9q9tWb7k+UPnpbA5S1o2HdrdvSkP3rvumOdYd/cT2ZpjvGWtumd23t4zM02fqcv4iZMz/p3tPfu2Z+2KZVn4eGuS2/LI0DlpGl+fGc31SZLdW1dn/p3LUygUMm9RTa6/sj5TZjT3/ud9bXlqQXPWFAp5afbAzJ31J6lvuix5e1d2vZ0MLBbf+VDvTrr2pD0v5W/+cVi+MfW8nDf1hpyXJD27smrRvKw67FtWoWNNFt61Jsdzm3q3dXc/ka1XnZaaYrJ70zNZvOPIMZ//5sPZ2ticmiTtLz+dlnd92+vs+MW/r3R2dKRQeDTXzB2bwvH+Tb26trb3RHW+kda2905Y6l+dMUMHpLP9lbS2HbnAUql/ho8Zmr6d7dnY2ta7rbohc2edny0P/nUWrelIqdQ/18ybn7qszTXXLnjfpwC1o0enb2dnNra2Hs8h/EpUVVVl5IWzMm9mQ8rTlWXXnZFbWo7/TXDcf8Jt+yUnodDRlo0dbXm/d2ih0JHWje+KuDf5zcpBqZ92W4ZNfD19PlGbwZXJlhUvfeAjmdaNG993+69LqVSXv/+3BzLmwFnc9nzuXpkPdVGWDR48+K9+BWv70ApdrVmxeW9+p3pIqk7un3Ruz/qWxZn3vWO/H//6VGbMp/8wA0t7su2nL+Zb06/Phn0f7hZ53LcsfTR8/A5jEBiDwBgExiAwhRx4rieEYqlkDxJvWTAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMP8HoynPSWk1Am0AAAAASUVORK5CYII= 

と私はそれが有効なbase64で画像ではないと思います：

const renderStream = webshot('google.com',{}); 

renderStream.on('data', (data) => { 
    console.log(data.toString('base64')); 
}); 

次の文字列が生成されます。

は私がしようとすると私は忘れてしまった

jsfiddle

Answer 1

webshotの最後のコミットは2016年2月だったので、別のパッケージを見ることをお勧めします。ヘッドレスクロムは、ウェブショットに依存するファントムを置き換えているようです。デビッドSchnurrは、あなたが正しいですpuppeteer - node bindings for headless Chrome

https://medium.com/@dschnr/using-headless-chrome-as-an-automated-screenshot-tool-4b07dffba79a

Answer 2

私のhtml構造体にsvgタグを追加します。