TF-3622 Fix deformed inlined image

Signed-off-by: dab246 <tdvu@linagora.com>
2025-04-08 13:35:03 +07:00
parent c13fed21ed
commit 551ef15276
4 changed files with 158 additions and 22 deletions
@@ -99,4 +99,144 @@ class HtmlInteraction {
      };
    </script>
  ''';
+
+  static String generateNormalizeImageScript(double displayWidth) {
+    return '''
+      <script type="text/javascript">
+        const displayWidth = $displayWidth;
+    
+        const sizeUnits = ['px', 'in', 'cm', 'mm', 'pt', 'pc'];
+    
+        function convertToPx(value, unit) {
+          switch (unit.toLowerCase()) {
+            case 'px': return value;
+            case 'in': return value * 96;
+            case 'cm': return value * 37.8;
+            case 'mm': return value * 3.78;
+            case 'pt': return value * (96 / 72);
+            case 'pc': return value * (96 / 6);
+            default: return value;
+          }
+        }
+    
+        function removeWidthHeightFromStyle(style) {
+          style = style.replace(/width\\s*:\\s*[\\d.]+[a-zA-Z%]+\\s*;?/gi, '');
+          style = style.replace(/height\\s*:\\s*[\\d.]+[a-zA-Z%]+\\s*;?/gi, '');
+          style = style.trim();
+          if (style.length && !style.endsWith(';')) {
+            style += ';';
+          }
+          return style;
+        }
+    
+        function extractWidthHeightFromStyle(style) {
+          const result = {};
+          const widthMatch = style.match(/width\\s*:\\s*([\\d.]+)([a-zA-Z%]+)\\s*;?/);
+          const heightMatch = style.match(/height\\s*:\\s*([\\d.]+)([a-zA-Z%]+)\\s*;?/);
+    
+          if (widthMatch) {
+            const value = parseFloat(widthMatch[1]);
+            const unit = widthMatch[2];
+            if (!isNaN(value) && unit) {
+              result['width'] = { value, unit };
+            }
+          }
+    
+          if (heightMatch) {
+            const value = parseFloat(heightMatch[1]);
+            const unit = heightMatch[2];
+            if (!isNaN(value) && unit) {
+              result['height'] = { value, unit };
+            }
+          }
+    
+          return result;
+        }
+    
+        function normalizeStyleAttribute(attrs) {
+          let style = attrs['style'];
+          if (!style) {
+            attrs['style'] = 'display:inline;max-width:100%;';
+            return;
+          }
+    
+          style = style.trim();
+          const dimensions = extractWidthHeightFromStyle(style);
+          const hasWidth = dimensions.hasOwnProperty('width');
+    
+          if (hasWidth) {
+            const widthData = dimensions['width'];
+            const widthPx = convertToPx(widthData.value, widthData.unit);
+    
+            if (displayWidth !== undefined &&
+                widthPx > displayWidth &&
+                sizeUnits.includes(widthData.unit)) {
+              style = removeWidthHeightFromStyle(style).trim();
+            }
+          }
+    
+          if (style.length && !style.endsWith(';')) {
+            style += ';';
+          }
+    
+          if (!style.includes('max-width')) {
+            style += 'max-width:100%;height:auto;';
+          }
+    
+          if (!style.includes('display')) {
+            style += 'display:inline;';
+          }
+    
+          attrs['style'] = style;
+        }
+    
+        function normalizeWidthHeightAttribute(attrs) {
+          const widthStr = attrs['width'];
+          const heightStr = attrs['height'];
+    
+          if (!widthStr || displayWidth === undefined) return;
+    
+          const widthValue = parseFloat(widthStr);
+          if (isNaN(widthValue) || widthValue <= displayWidth) return;
+    
+          delete attrs['width'];
+          delete attrs['height'];
+        }
+    
+        function normalizeImageSize(attrs) {
+          normalizeStyleAttribute(attrs);
+          normalizeWidthHeightAttribute(attrs);
+        }
+    
+        function applyImageNormalization() {
+          document.querySelectorAll('img').forEach(img => {
+            const attrs = {
+              style: img.getAttribute('style'),
+              width: img.getAttribute('width'),
+              height: img.getAttribute('height')
+            };
+    
+            normalizeImageSize(attrs);
+    
+            if (attrs.style != null) img.setAttribute('style', attrs.style);
+            if ('width' in attrs) img.setAttribute('width', attrs.width);
+            else img.removeAttribute('width');
+    
+            if ('height' in attrs) img.setAttribute('height', attrs.height);
+            else img.removeAttribute('height');
+          });
+        }
+        
+        function safeApplyImageNormalization() {
+          try {
+            applyImageNormalization();
+          } catch (e) {
+            console.error('Image normalization failed:', e);
+          }
+        }
+        
+        window.onload = safeApplyImageNormalization;
+      </script>
+    ''';
+  }
 }