Viewer: Allow fading the background image by blending it with the background color

src/pyj/read_book/prefs/user_stylesheet.pyj

@@ -50,7 +50,7 @@ def background_widget(sd):
 
 
 def background_style_widget(sd):
-    ans = E.div(E.label(
+    ans = E.div(style='margin-bottom: 1ex', E.label(
         _('Background image style') + ':\xa0',
         E.select(name='background_image_style',
             E.option(_('Scaled'), value='scaled'),
@@ -61,6 +61,17 @@ def background_style_widget(sd):
     return ans
 
 
+def background_fade_widget(sd):
+    return E.div(E.label(
+        _('Background image fade (%)') + ':\xa0',
+        E.input(
+            name='background_image_fade', type='number', max='100', min='0', step='1',
+            value='' + sd.get('background_image_fade'),
+            title=_('Fading of the background image is done by blending it with the background color')
+        ),
+    ))
+
+
 def create_user_stylesheet_panel(container):
     sd = get_session_data()
     container.appendChild(
@@ -71,6 +82,7 @@ def create_user_stylesheet_panel(container):
                 E.div(_('Choose a background image to display behind the book text'), style='margin-bottom: 1.5ex'),
                 background_widget(sd),
                 background_style_widget(sd),
+                background_fade_widget(sd),
             ),
             E.div(
                 style='flex-grow: 10; display: flex; flex-flow: column',
@@ -115,5 +127,10 @@ def commit_user_stylesheet(onchange, container):
     if bis is not old:
         changed = True
         sd.set('background_image_style', bis)
+    old = int(sd.get('background_image_fade'))
+    bif = int(container.querySelector('input[name=background_image_fade]').value)
+    if old is not bif:
+        changed = True
+        sd.set('background_image_fade', bif)
     if changed:
         onchange()

src/pyj/read_book/settings.pyj

@@ -17,6 +17,7 @@ def update_settings(settings):
     opts.user_stylesheet = settings.user_stylesheet or ''
     opts.hide_tooltips = settings.hide_tooltips
     opts.cover_preserve_aspect_ratio = settings.cover_preserve_aspect_ratio
+    opts.bg_image_fade = settings.bg_image_fade or 'transparent'
 
 update_settings()
 
@@ -32,6 +33,7 @@ def apply_colors():
         # set background color to transparent so that the users background
         # color which is set on the iframe is used instead
         elem.style.backgroundColor = 'transparent'
+    document.documentElement.style.backgroundColor = opts.bg_image_fade
     ss = document.getElementById('calibre-color-scheme-style-overrides')
     if not ss:
         ss = E.style(id='calibre-color-scheme-style-overrides', type='text/css')

src/pyj/read_book/view.pyj

@@ -30,7 +30,8 @@ from read_book.toc import get_current_toc_nodes, update_visible_toc_nodes
 from read_book.touch import set_left_margin_handler, set_right_margin_handler
 from session import get_device_uuid, get_interface_data
 from utils import (
-    html_escape, is_ios, parse_url_params, safe_set_inner_html, username_key
+    color_to_rgba, html_escape, is_ios, parse_url_params, safe_set_inner_html,
+    username_key
 )
 from viewer.constants import READER_BACKGROUND_URL
 
@@ -543,12 +544,19 @@ class View:
 
     def iframe_settings(self, name):
         sd = get_session_data()
+        bg_image_fade = 'transparent'
+        cs = self.get_color_scheme(True)
+        fade = int(sd.get('background_image_fade'))
+        if self.iframe.style.backgroundImage is not 'none' and fade > 0:
+            rgba = color_to_rgba(cs.background)
+            bg_image_fade = f'rgba({rgba[0]}, {rgba[1]}, {rgba[2]}, {fade/100})'
         return {
             'margin_left': 0 if name is self.book.manifest.title_page_name else sd.get('margin_left'),
             'margin_right': 0 if name is self.book.manifest.title_page_name else sd.get('margin_right'),
             'read_mode': sd.get('read_mode'),
             'columns_per_screen': sd.get('columns_per_screen'),
-            'color_scheme': self.get_color_scheme(True),
+            'color_scheme': cs,
+            'bg_image_fade': bg_image_fade,
             'base_font_size': sd.get('base_font_size'),
             'user_stylesheet': sd.get('user_stylesheet'),
             'keyboard_shortcuts': sd.get('keyboard_shortcuts'),

src/pyj/session.pyj

@@ -36,6 +36,7 @@ defaults = {
     'user_stylesheet': '',
     'background_image': None,
     'background_image_style': 'scaled',
+    'background_image_fade': 0,
     'current_color_scheme': 'white',
     'user_color_schemes': {},
     'base_font_size': 16,
@@ -62,6 +63,7 @@ is_local_setting = {
     'user_stylesheet': True,
     'background_image': True,
     'background_image_style': True,
+    'background_image_fade': True,
     'current_color_scheme': True,
     'base_font_size': True,
     'controls_help_shown_count': True,

src/pyj/utils.pyj

@@ -241,6 +241,18 @@ def sandboxed_html(html, style, sandbox):
     ans.srcdoc = final_html
     return ans
 
+
+def color_to_rgba(color):
+    # take an arbitrary color spec and return it as [r, g, b, a]
+    cvs = document.createElement('canvas')
+    cvs.height = 1
+    cvs.width = 1
+    ctx = cvs.getContext('2d')
+    ctx.fillStyle = color
+    ctx.fillRect(0, 0, 1, 1)
+    return ctx.getImageData(0, 0, 1, 1).data
+
+
 if __name__ is '__main__':
     from pythonize import strings
     strings()