From 408af2dae4a2c6a6cc038874f7924b680e26aa51 Mon Sep 17 00:00:00 2001
From: Romit Choudhary <rc@zammad.com>
Date: Fri, 11 Jun 2021 13:26:05 +0000
Subject: [PATCH] Fixes #3538 - inline image conversion from jpeg to png causes
 huge overhead

---
 .../javascripts/app/lib/app_post/utils.coffee | 15 +++++++-
 app/views/tests/html_utils.html.erb           |  6 +++
 public/assets/tests/html_utils.js             | 38 +++++++++++++++++++
 3 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/app/lib/app_post/utils.coffee b/app/assets/javascripts/app/lib/app_post/utils.coffee
index 266e7d3e1..70eef244e 100644
--- a/app/assets/javascripts/app/lib/app_post/utils.coffee
+++ b/app/assets/javascripts/app/lib/app_post/utils.coffee
@@ -1344,7 +1344,9 @@ class App.Utils
     ctx = canvas.getContext('2d')
     ctx.drawImage(img, 0, 0, img.width, img.height)
     try
-      data = canvas.toDataURL('image/png')
+      # img alt attribute is used to get file type
+      # if not present, then it will default to image/png
+      data = canvas.toDataURL(App.Utils.getMimeTypeFromFilename(img.alt))
       params.success(img, data) if params.success
       return data
     catch e
@@ -1406,6 +1408,7 @@ class App.Utils
     imageCache.onerror = ->
       App.Log.notice('Utils', "Unable to load image from #{originalImage.src}")
       params.fail(originalImage) if params.fail
+    imageCache.alt = originalImage.alt
     imageCache.src = originalImage.src
 
   @baseUrl: ->
@@ -1470,3 +1473,13 @@ class App.Utils
   @safeParseHtml: (input) ->
     try $.parseHTML(input)
     catch e then $.parseHTML('<div>' + input + '</div>')[0].childNodes
+
+
+  # Gets file Mime Type from file name
+  # For e.g. oscar-menu.jpg returns image/jpeg
+  # For other file types it return image/png as default mimeType
+  @getMimeTypeFromFilename: (filename) ->
+    if filename?.match(/\.(jpe?g)$/i)
+      return 'image/jpeg'
+
+    return 'image/png'
diff --git a/app/views/tests/html_utils.html.erb b/app/views/tests/html_utils.html.erb
index 0bb0c9792..652eb5973 100644
--- a/app/views/tests/html_utils.html.erb
+++ b/app/views/tests/html_utils.html.erb
@@ -16,3 +16,9 @@ body {
 <div id="image2data1"></div>
 
 <div id="image2data2"></div>
+
+<div id="jpegImage"></div>
+
+<div id="pngImage"></div>
+
+<div id="jpegImage2"></div>
diff --git a/public/assets/tests/html_utils.js b/public/assets/tests/html_utils.js
index 62c4b339d..b35771815 100644
--- a/public/assets/tests/html_utils.js
+++ b/public/assets/tests/html_utils.js
@@ -3304,6 +3304,44 @@ var htmlImage2DataUrlTest2Fail = function() {
     ok(false, 'fail callback is exectuted!')
   });
 }
+
+// Gitlab Issue #3538
+// Jpeg images should convert to jpegs
+// This functionality uses alt attribute present in img tag to get file type
+// if alt attribute is missing then it will default to image/png
+var jpegImageSource = '<img src="/assets/images/8000x300.jpg" alt="test.jpeg">jpeg image'
+$('#jpegImage').html(jpegImageSource)
+var htmlImage2DataUrlTest3 = function() {
+  test("htmlImage2DataUrl3 async", function() {
+    var result = App.Utils.htmlImage2DataUrl(jpegImageSource)
+    ok(result.match(/jpeg image/), jpegImageSource)
+    ok(result.match(/^\<img src=\"data:image\/jpeg;base64,/), jpegImageSource)
+  });
+}
+$('#jpegImage img').one('load', htmlImage2DataUrlTest3)
+
+var pngImageSource = '<img src="/assets/images/1000x1000.png" alt="test.png">png image'
+$('#pngImage').html(pngImageSource)
+var htmlImage2DataUrlTest4 = function() {
+  test("htmlImage2DataUrl4 async", function() {
+    var result = App.Utils.htmlImage2DataUrl(pngImageSource)
+    ok(result.match(/png image/), pngImageSource)
+    ok(result.match(/^\<img src=\"data:image\/png;base64,/), pngImageSource)
+  });
+}
+$('#pngImage img').one('load', htmlImage2DataUrlTest4)
+
+var jpegImageSourceWithoutAlt = '<img src="/assets/images/8000x300.jpg">jpeg image'
+$('#jpegImage2').html(jpegImageSourceWithoutAlt)
+var htmlImage2DataUrlTest5 = function() {
+  test("htmlImage2DataUrl5 async", function() {
+    var result = App.Utils.htmlImage2DataUrl(jpegImageSourceWithoutAlt)
+    ok(result.match(/jpeg image/), jpegImageSourceWithoutAlt)
+    ok(result.match(/^\<img src=\"data:image\/png;base64,/), jpegImageSourceWithoutAlt)
+  });
+}
+$('#jpegImage2 img').one('load', htmlImage2DataUrlTest5)
+
 App.Utils.htmlImage2DataUrlAsyncInline($('#image2data2'), {success: htmlImage2DataUrlTest2Success, fail: htmlImage2DataUrlTest2Fail})
 
 }