Fixed issue #2976 - Not possible to copy inline images text from article to article (copy text and image image - via clipboard ctrl+c/ctrl+v).

This commit is contained in:
Martin Edenhofer 2020-03-20 14:01:06 +01:00 committed by Thorsten Eckel
parent 1aeb0a9ba5
commit 16fec3d888
3 changed files with 39 additions and 17 deletions

View file

@ -1217,25 +1217,38 @@ class App.Utils
)
html.get(0).innerHTML
@_htmlImage2DataUrl: (img) ->
@_htmlImage2DataUrl: (img, params = {}) ->
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')
try
data = canvas.toDataURL('image/png')
params.success(img, data) if params.success
return data
catch e
App.Log.notice('Utils', "Can\'t insert image from #{img.src}", e)
params.fail(img) if params.fail
return
@htmlImage2DataUrlAsyncInline: (html, callback) ->
# convert image urls info data urls in element
@htmlImage2DataUrlAsyncInline: (html, params = {}) ->
html.find('img').each( (index) ->
element = $(@)
src = element.attr('src')
# <img src="cid: ..."> or an empty src attribute may mean broken emails (see issue #2305 / #2701)
return if !src? or src.match(/^(data|cid):/i)
App.Utils._htmlImage2DataUrlAsync(@, (data) ->
element.attr('src', data)
callback(element) if callback
App.Utils._htmlImage2DataUrlAsync(@,
success: (img, data) ->
$img = $(img)
$img.attr('src', data)
$img.css('max-width','100%')
params.success(img, data) if params.success
fail: (img) ->
img.remove()
params.fail(img) if params.fail
)
)
@ -1253,7 +1266,7 @@ class App.Utils
cacheOrDone = ->
if (nextElem = elems.pop())
App.Utils._htmlImage2DataUrlAsync(nextElem, (data) ->
App.Utils._htmlImage2DataUrlAsync(nextElem, success: (data) ->
$(nextElem).attr('src', data)
cacheOrDone()
)
@ -1262,12 +1275,14 @@ class App.Utils
cacheOrDone()
@_htmlImage2DataUrlAsync: (originalImage, callback) ->
@_htmlImage2DataUrlAsync: (originalImage, params = {}) ->
imageCache = new Image()
imageCache.crossOrigin = 'anonymous'
imageCache.onload = ->
data = App.Utils._htmlImage2DataUrl(originalImage)
callback(data) if callback
App.Utils._htmlImage2DataUrl(originalImage, params)
imageCache.onerror = ->
App.Log.notice('Utils', "Unable to load image from #{originalImage.src}")
params.fail(originalImage) if params.fail
imageCache.src = originalImage.src
@baseUrl: ->

View file

@ -382,6 +382,7 @@
if (htmlString) {
this.log('insert html from clipboard', htmlString)
this.paste(htmlString)
App.Utils.htmlImage2DataUrlAsyncInline(this.$element)
return true
}
}

View file

@ -3278,13 +3278,19 @@ $('#image2data1 img').one('load', htmlImage2DataUrlTest1)
var source2 = '<img src="/assets/images/chat-demo-avatar.png">some test'
$('#image2data2').html(source2)
var htmlImage2DataUrlTest2 = function(element) {
test("htmlImage2DataUrl2 async", function() {
ok(!element.html().match(/chat-demo-avatar/), source2)
ok(element.get(0).outerHTML.match(/^\<img src=\"data:image\/png;base64,/), source2)
var htmlImage2DataUrlTest2Success = function(element) {
test('htmlImage2DataUrl2 async', function() {
ok(!$(element).html().match(/chat-demo-avatar/), source2)
ok($(element).get(0).outerHTML.match(/^\<img src=\"data:image\/png;base64,/), source2)
ok($(element).attr('style'), 'max-width: 100%;')
});
}
App.Utils.htmlImage2DataUrlAsyncInline($('#image2data2'), htmlImage2DataUrlTest2)
var htmlImage2DataUrlTest2Fail = function() {
test('htmlImage2DataUrl2 async', function() {
ok(false, 'fail callback is exectuted!')
});
}
App.Utils.htmlImage2DataUrlAsyncInline($('#image2data2'), {success: htmlImage2DataUrlTest2Success, fail: htmlImage2DataUrlTest2Fail})
}