Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Use an img tag instead of canvas for rendering avatars

Browse Source
This commit is contained in:
JC Brand 2017-11-17 13:19:21 +01:00
parent bac1d22205
commit ca0cbb1c31
2 changed files with 8 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/converse-chatview.js
View File

@ -218,55 +218,23 @@
}
});
_converse.ChatBoxHeading = Backbone.VDOMView.extend({
_converse.ChatBoxHeading = Backbone.View.extend({
initialize () {
this.model.on('change:image', this.setAvatar, this);
this.model.on('change:status', this.onStatusMessageChanged, this);
this.model.on('change:fullname', this.render, this);
this.initializeAvatar();
},
renderHTML () {
return tpl_chatbox_head(
render () {
this.el.innerHTML = tpl_chatbox_head(
_.extend(this.model.toJSON(), {
'avatar_width': _converse.chatview_avatar_width,
'avatar_height': _converse.chatview_avatar_height,
'info_close': __('Close this chat box'),
})
);
},
afterRender () {
this.setAvatar();
},
setAvatar () {
this.avatar.src = `data:${this.model.get('image_type')};base64,${this.model.get('image')}`;
},
initializeAvatar () {
var that = this;
this.avatar = new Image();
this.avatar.onload = function () {
const canvas = that.el.querySelector('canvas');
const avatar_width = _converse.chatview_avatar_width;
const avatar_height = _converse.chatview_avatar_height;
// XXX: this seems to be needed to work around the
// chrome setting width/height to 0 (possible due to
// no canvas data being there?)
canvas.setAttribute('width', avatar_width);
canvas.setAttribute('height', avatar_height);
const ctx = canvas.getContext('2d');
const ratio = this.width/this.height;
if (ratio < 1) {
ctx.drawImage(this, 0,0, avatar_width, avatar_height*(1/ratio));
} else {
ctx.drawImage(this, 0,0, avatar_width, avatar_height*ratio);
}
};
return this;
},
onStatusMessageChanged (item) {

5
src/templates/chatbox_head.html
View File

@ -1,6 +1,9 @@
<div class="chat-head chat-head-chatbox">
<a class="chatbox-btn close-chatbox-button icon-close" title="{{{o.info_close}}}"></a>
<canvas height="{{{o.avatar_height}}}px" width="{{{o.avatar_width}}}px" class="avatar"></canvas>
<img alt="User Avatar"
class="avatar"
height="{{{o.avatar_height}}}px" width="{{{o.avatar_width}}}px"
src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
<div class="chat-title">
{[ if (o.url) { ]}
<a href="{{{o.url}}}" target="_blank" rel="noopener" class="user">