Fixes #3538 - inline image conversion from jpeg to png causes huge overhead

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'

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>

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})
 
 }