环信DEMO发送表情图片源码试行案例分享

我把主要代码贴出来：
（因为此处有些地方我还想完善一下所以暂时不打包源码）

.chat .chat-left .chat-contentimg {
background: rgba(243, 243, 243, 0);
float: left;
left: 0.5rem;
margin-left: .2rem;
}

.chat .chat-left .chat-contentimg img {
height: 3.08rem;
border-radius: 0.14rem;
}
.chat .chat-right .chat-contentimg {
background: rgba(243, 243, 243, 0);
float: right;
right: 0.5rem;
margin-right: .2rem;
}

.chat .chat-right .chat-contentimg img{
border-radius: 0.14rem;
height: 3.09rem;
}

<div class="chat-status" v-if="chats.direction!='send'&&chats.body.type=='voice'">

<div class="badge" v-if="chats.isReadAcked==false"></div>
<div class="times">{{chats.body.duration}}``</div>
</div>

<div class="chat-contentimg" v-if="chats.body.type=='image'" @click="fnOpenImg(chats.body.remotePath)">
<img :src="chats.body.remotePath" />
</div>

//文本表情转化
translateText: function(text) {
if (text == '' || text == undefined) {
return;
}
msg = text;
var emotionObj = emotion;
var regx = /\[(.*?)\]/gm;
var translateMSg = text.replace(regx, function(math) {
var imgSrc = emotionObj[math];
if (!imgSrc) {
return math;
}
var img = '<img src="../../res/img/emotion/' + imgSrc + '.png" class="emotion">'
return img;
})
console.log(translateMSg)
return translateMSg;
},

//图片浏览器放在表情转化下面我这是初步写有个思绪就是把所有图片单独组成一个数据然后传数组弄成跟微信可以滑动浏览所有聊天里面的图片具体这块需要完善这块我只是单独浏览点击的图片目前这块你们可以使用模块（photoBrowser）我这个是单独写的目前还没有完善
fnOpenImg:function(img){
var prompt = {
winName: "chat_win",
frameName: "chat_frm",
title: "图片浏览",
msg: img,
clickName: "fnOpenClose",
right: "",
}
var name = "popup";
popup(prompt, name);
}

//UIChatBox模块里面增加发送图片点击打开图片的
if (ret.eventType === "send") {
// 发送文本
fnSendText(ret.msg);
}

//在发送文本下面
if (ret.eventType === "clickExtras" && ret.index === 0) {
// 发送图片
// toast("发送图片:待开发");
fnSendImage();
}

//发送图片消息
function fnSendImage() {
api.getPicture({
sourceType: 'album',
encodingType: 'jpg',
mediaValue: 'pic',
destinationType: 'url',
allowEdit: true,
// quality: 50,
// targetWidth: 100,
// targetHeight: 100,
saveToPhotoAlbum: false
}, function(ret, err) {
if (ret) {
fnEaseChatSendImage(api.pageParam.conversationid, api.pageParam.type, ret.data, $api.getStorage('user'), api.pageParam.conversationid);
} else {
toast(err.msg);
}
});
}

easeChat.js增加：

// 发送图片消息
function fnEaseChatSendImage(conversationId_, chatType_, path_, from_, to_) {
var easeChat = api.require('easeChat');
easeChat.sendImage({
conversationId: conversationId_, //此字段为会话id一开始可以对话可以为空
chatType: chatType_, //会话类型chat：单聊会话 groupChat：群聊会话 chatRoom：聊天室会话
path: path_, //发送的消息内容
from: from_, //发送方当前登录账号
to: to_, //接受方
ext: {} // //JSON 对象；消息扩展，Key值类型必须是NSString, Value值类型必须是NSString或者 NSNumber类型的 BOOL, int, unsigned in, long long, double
}, function(ret, err) {
if (ret) {
if (ret.status == true) {
console.log(JSON.stringify(ret))
// // 刷新一下首页列表消息
fnGetAllConversations();
// // 向聊天消息追加一条消息
api.execScript({
name: 'chat',
frameName: 'chat_frm',
script: 'fnAddanew(' + JSON.stringify([ret.message]) + ',' + true + ');'
});
// //将指定消息设置为已读
fnMarkMessageAsRead(ret.message.conversationId, ret.message.chatType, ret.message.messageId);
} else {
toast("APICloud环信DEMO：消息发送失败请稍后再试");
}
} else {
toast("APICloud环信DEMO：" + err.msg);
}
});
}

环信DEMO发送表情图片源码试行案例分享

猜你喜欢