Fixed issue #2101 - Inline images are lost on forward or quoted reply.

app/assets/javascripts/app/controllers/ticket_zoom/article_action/email_reply.coffee

@@ -131,6 +131,7 @@ class EmailReply extends App.Controller
     selected = App.ClipBoard.getSelected('html')
     if selected
       selected = App.Utils.htmlCleanup(selected).html()
+      selected = App.Utils.htmlImage2DataUrl(selected)
     if !selected
       selected = App.ClipBoard.getSelected('text')
       if selected
@@ -173,6 +174,8 @@ class EmailReply extends App.Controller
     body = ''
     if article.content_type.match('html')
       body = App.Utils.textCleanup(article.body)
+      body = App.Utils.htmlImage2DataUrl(article.body)
+
     if article.content_type.match('plain')
       body = App.Utils.textCleanup(article.body)
       body = App.Utils.text2html(body)

app/assets/javascripts/app/lib/app_post/utils.coffee

@@ -1080,3 +1080,23 @@ class App.Utils
       )
     App.Delay.set(a, 500, undefined, 'tags')
 
+  @htmlImage2DataUrl: (html) ->
+    return html if !html
+    return html if !html.match(/<img/i)
+    html = @_checkTypeOf("<div>#{html}</div>")
+
+    html.find('img').each( (index) ->
+      src = $(@).attr('src')
+      if !src.match(/^data:/i)
+        base64 = App.Utils._htmlImage2DataUrl(@)
+        $(@).attr('src', base64)
+    )
+    html.get(0).innerHTML
+
+  @_htmlImage2DataUrl: (img) ->
+    canvas = document.createElement('canvas')
+    canvas.width = img.width
+    canvas.height = img.height
+    ctx = canvas.getContext('2d')
+    ctx.drawImage(img, 0, 0)
+    canvas.toDataURL('image/png')

app/views/tests/html_utils.html.erb

@@ -13,3 +13,5 @@ body {
 </script>
 
 <div id="qunit" class="u-dontfold"></div>
+
+<div id="image2text"></div>

public/assets/tests/html_utils.js

@@ -2644,8 +2644,6 @@ test('check getRecipientArticle format', function() {
 
 });
 
-}
-
 test("contentTypeCleanup", function() {
 
   var source = "image/png"
@@ -2682,4 +2680,51 @@ test("contentTypeCleanup", function() {
   should = "image/gif"
   result = App.Utils.contentTypeCleanup(source)
   equal(result, should, source)
-});
+});
+
+// htmlImage2DataUrl
+test("htmlImage2DataUrl", function() {
+
+  var source = '<div>test 13</div>'
+  var should = '<div>test 13</div>'
+  var result = App.Utils.htmlImage2DataUrl(source)
+  equal(result, should, source)
+
+  source = 'some test'
+  should = 'some test'
+  result = App.Utils.htmlImage2DataUrl(source)
+  equal(result, should, source)
+
+  source = '<img src="some url">some test'
+  should = '<img src="data:,">some test'
+  result = App.Utils.htmlImage2DataUrl(source)
+  equal(result, should, source)
+
+  source = '<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAADAAEDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAACv/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAF/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AbgQDv//Z">some test'
+  should = '<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAADAAEDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAACv/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAF/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AbgQDv//Z">some test'
+  result = App.Utils.htmlImage2DataUrl(source)
+  equal(result, should, source)
+
+  source = '<img src="data:image/jpeg;base64,some_data_123">some <img src="some url">test'
+  should = '<img src="data:image/jpeg;base64,some_data_123">some <img src="data:,">test'
+  result = App.Utils.htmlImage2DataUrl(source)
+  equal(result, should, source)
+
+});
+
+source = '<img src="/assets/images/avatar-bg.png">some test'
+$('#image2text').html(source)
+var htmlImage2DataUrlTest = function() {
+
+  var result = App.Utils.htmlImage2DataUrl(source)
+  test("htmlImage2DataUrl async", function() {
+    var result = App.Utils.htmlImage2DataUrl(source)
+    ok(result.match(/some test/), source)
+    ok(!result.match(/avatar-bg.png/), source)
+    ok(result.match(/^\<img src=\"data:image\/png;base64,/), source)
+  });
+
+}
+$('#image2text img').one('load', htmlImage2DataUrlTest)
+
+}