Web 端集成融云 SDK 如何发送正确图片消息给移动端展示?
Web 端集成融云 SDK 如何发送正确图片消息给移动端展示?
前言
Web 端使用融云的即时通讯 SDK 在发送图片消息给移动端的时候,移动端一般会收到一个缩略图数据和展示高清图片地址,但是往往 Web 端发送的图片消息总数不对,所以咋们聊一聊 Web 端如何正确发送图片消息
总结步骤如下:
1、如何拿到高清图片地址
2、如何生成缩略图数据
首先要对发送图片消息的参数要有所了解
下面是融云提供发送图片消息的代码:
var conversation = im.Conversation.get({ targetId: '接收方的 userId', type: RongIMLib.CONVERSATION_TYPE.PRIVATE }); conversation.send({ messageType: RongIMLib.MESSAGE_TYPE.IMAGE, // 'RC:ImgMsg' content: { content: '/9j/4AAQSBAAD/2wBDDBAYEBAQEB....', // // 压缩后的 base64 略缩图, 用来快速展示图片 imageUri: 'https://www.xxx.cn/images/newVersion/log_wx.png' // 上传到服务器的 url. 用来展示高清图片 } }).then(function(message){ console.log('发送图片消息成功', message); });
下面是参数说明
如何拿到高清图片地址
根据融云上传图片文档的描述来开发即可……这里不多描述了,以免占篇幅,详情可以访问这个网站:https://docs.rongcloud.cn/v4/views/im/noui/guide/private/msgmanage/msgsend/web.html#ImgMsg
如何生成缩略图数据什么是缩略图? 在融云文档定义的缩略图是 base64 格式,并且 base64 字符串大小不能超过 80kb ,还有一点就是 base64 必须不带前缀
什么是缩略图? 在融云文档定义的缩略图是 base64 格式,并且 base64 字符串大小不能超过 80kb ,还有一点就是 base64 必须不带前缀
所以我们要做到如下几点
1、进行 base64 格式转换
2、进行压缩
3、去掉 base64 的前缀
进行 base64 格式转换并且压缩
转换 base64 :我使用的是 canvas.toDataURL 方法
压缩:使用 canvas 的 drawImage() 方法
OK,下面是我的代码:
var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var img = new Image(); var urlNumber = 1;//要渲染的图片数 var w = 300;//canvas的宽 var h = 300;//canvas的高 img.crossOrigin = 'Anonymous';//解决Canvas.toDataURL 图片跨域问题 img.src = data.downloadUrl; //图片路径(图片上传的服务器后的地址) //渲染方法 var imgs = function () { context.drawImage(img, 0, 0, w, h); //导出 var base64Img = canvas.toDataURL('image/jpg'); console.log(base64Img); } img.onload = function () { urlNumber -= 1; if (urlNumber === 0) { imgs(); } }
去掉 base64 的前缀
去掉前缀比价简单,直接给一个正则就可以了
const data = 'data:image/png;base64,iVBORw0K······' // 此处省略不知道多少个字符 let noPrefix = data.replace(/^data:image\/\w+;base64,/, '') // replace + 正则 把前缀替换成空data.replace(/^data:image\/\w+;base64,/, '') // replace + 正则 把前缀替换成空