new: Add variable width thumbnail method

lookyloo/lookyloo.py

@@ -644,21 +644,24 @@ class Lookyloo():
         '''Get the screenshot(s) of the rendered page'''
         return self._get_raw(capture_uuid, 'png', all_files=False)
 
-    def get_screenshot_thumbnail(self, capture_uuid: str, for_datauri=False) -> Union[str, BytesIO]:
+    def get_screenshot_thumbnail(self, capture_uuid: str, for_datauri: bool=False, width: int=64) -> Union[str, BytesIO]:
-        '''Get the thumbnail of the rendered page'''
+        '''Get the thumbnail of the rendered page. Always crop to a square.'''
         to_return = BytesIO()
-        size = 64, 64
+        size = width, width
         try:
             s = self.get_screenshot(capture_uuid)
-            with Image.open(s) as screenshot:
+            orig_screenshot = Image.open(s)
-                c_screenshot = screenshot.crop((0, 0, screenshot.width, screenshot.width))
+            to_thumbnail = orig_screenshot.crop((0, 0, orig_screenshot.width, orig_screenshot.width))
-            c_screenshot.thumbnail(size)
-            c_screenshot.save(to_return, 'png')
         except Image.DecompressionBombError as e:
             # The image is most probably too big: https://pillow.readthedocs.io/en/stable/reference/Image.html
             self.logger.warning(f'Unable to generate the screenshot thumbnail of {capture_uuid}: image too big ({e}).')
-            # TODO: Default image
+            error_img: Path = get_homedir() / 'website' / 'web' / 'static' / 'error_screenshot.png'
+            to_thumbnail = Image.open(error_img)
 
+        to_thumbnail.thumbnail(size)
+        to_thumbnail.save(to_return, 'png')
+
+        to_return.seek(0)
         if for_datauri:
             return base64.b64encode(to_return.getvalue()).decode()
         else:

website/web/__init__.py

@@ -280,6 +280,13 @@ def image(tree_uuid: str):
                      as_attachment=True, attachment_filename='image.png')
 
 
+@app.route('/tree/<string:tree_uuid>/thumbnail/', defaults={'width': 64}, methods=['GET'])
+@app.route('/tree/<string:tree_uuid>/thumbnail/<int:width>', methods=['GET'])
+def thumbnail(tree_uuid: str, width: int):
+    to_return = lookyloo.get_screenshot_thumbnail(tree_uuid, for_datauri=False, width=width)
+    return send_file(to_return, mimetype='image/png')
+
+
 @app.route('/tree/<string:tree_uuid>/html', methods=['GET'])
 def html(tree_uuid: str):
     to_return = lookyloo.get_html(tree_uuid)

website/web/static/tree.js

@@ -492,7 +492,7 @@ function update(root, computed_node_width=0) {
                       .attr('id', 'screenshot_thumbnail')
                       .attr("width", thumbnail_size)
                       .attr("height", thumbnail_size)
-                      .attr("xlink:href", screenshot_thumbnail ? `data:image/png;base64,${screenshot_thumbnail}` : '/static/error_screenshot.png')
+                      .attr("xlink:href", `data:image/png;base64,${screenshot_thumbnail}`)
                       .attr('cursor', 'pointer')
                       .on('mouseover', (event, d) => {
                           d3.select('#tooltip')

website/web/templates/tree.html

@@ -18,7 +18,7 @@
 />
 <meta
   name="twitter:image"
-  content="//{{public_domain}}{{ url_for('image', tree_uuid=tree_uuid) }}"
+  content="//{{public_domain}}{{ url_for('thumbnail', tree_uuid=tree_uuid, width=1024) }}"
 />
 <meta
   property="og:url"