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 必须不带前缀
所以我们要做到如下几点
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 + 正则 把前缀替换成空
Web 端集成融云 SDK 如何发送正确图片消息给移动端展示?相关推荐
- 融云发送图片消息_Web 端集成融云 SDK 如何发送正确图片消息给移动端展示?
Web 端集成融云 SDK 如何发送正确图片消息给移动端展示? 前言 Web 端使用融云的即时通讯 SDK 在发送图片消息给移动端的时候,移动端一般会收到一个缩略图数据和展示高清图片地址,但是往往 W ...
- 集成融云 SDK 怎么实现多端同步未读数
最近在集成融云 SDK 的时候,碰到了一个跟未读数有关的问题,现象是这样的: 比如我在其中 Web 端已经清除了某个会话的未读数然后退出,再换个设备登入,这个时候未读数还有,并没有清除掉,我就纳闷了, ...
- 快速集成融云SDK– Android Studio
现在很多应用都加入了即时通讯功能(客服等),选择第三方的SDK比较省事快捷,这里就介绍一下集成融云SDK时遇到的一些问题. 这个是官网的集成指南:http://www.rongcloud.cn/doc ...
- ios 融云 重写对话列表_iOS集成融云SDK part 1 小记
之前虽然稍微了解过即时通讯方面的内容,但是一直没有怎么去做过聊天部分的.这次是刚刚使用融云,做一下记录. 关于融云SDK集成的具体步骤,我都是参考以下这些文章(很多图片都是直接从这些地方拿的,我真是太 ...
- 调用融云SDK创建讨论组失败bug记录
问题描述 项目集成融云SDK,在调用融云创建讨论组的时候,第一次创建失败,第二次创建成功. 猜测一: 猜测是因为创建的讨论组的时候,讨论组成员中有userId是融云中没有的,于是去向融云技术支持提工单 ...
- 基于融云SDK实现高仿微信
本篇主要介绍了一下本人正式完成的第一个Android demo应用. 1.demo运行效果图 2.为了实现微信的体验效果,这里面用到了几个特殊的控件或者技术. 2.1 第一张图中的"+&qu ...
- android.intent.action.view 融云,Android 融云SDK集成单聊
一 .下载 SDK 您可以到融云官方网站下载融云 SDK.融云 SDK 各部分功能以插件化的形式独立提供,开发者可以根据自己的需要,自由组合下载.各组件的功能如下: IMKit – 融云 IM 界面组 ...
- android讨论功能,集成融云Android SDK实现在群聊/讨论组中@人的功能
集成融云Android SDK实现在群聊/讨论组中@人的功能 可以确定的是融云SDK本身不提供@的功能,需要自定义实现. 在实现这个功能时,基本模仿微信的做法: 在列表中显示有人@了你 通知显示有人@ ...
- android 融云sdk集成,使用融云SDK集成
使用融云开始还是遇到了很多的坑的,特别是看不太明白官方文档.或许自己不够有耐心. 期间还遇到了许多bug,比如,明明配置的没问题了,可我的手机还是连不上融云. 后来还是在融云的知识库中找到了解决办法, ...
- 融云 SDK 集成详解 – Android Studio
一 .下载 SDK 您可以到融云官方网站下载融云 SDK.融云 SDK 各部分功能以插件化的形式独立提供,开发者可以根据自己的需要,自由组合下载.各组件的功能如下: IMKit – 融云 IM 界面组 ...
最新文章
- 【2019-07-17】和谐,源于用了点心
- (JAVA学习笔记) 异常处理
- GOF之行为型模式Ⅰ(重点)
- 零基础学习Python文本处理
- 年度影像旗舰vivo X70系列正式发布 售价3699元起
- golang 学习心得一(开发环境搭建过程中一些坑)
- 使用加密签名时遇到的一个问题
- 跟我一起数据挖掘(22)——spark入门
- 微信小程序使用QQ音乐API完整实例
- 一个股票软件开发了三年的人如何画制iOS k线图
- HTML,CSS 样式模板大全
- 《给忙碌者的天体物理学》pdf、mobi、epub下载
- 小象学院python数据分析课程怎么样_小象学院大数据分析集训营试听知识点整理-正则表达式...
- 什么是嵌入式系统?嵌入式系统应该如何学习?
- 小米扫地机器人粉尘盒_小米扫地机器人尘盒怎么打开
- 华为副总裁的演讲,披露了华为在5G领域最新布局
- 微信小程序开发开篇词 自顶向下,云端赋能:小程序的高效开发之道
- 移动收款功能(未完成,无参考价值)
- Oracle 恢复删除数据
- 引入echarts的js文件报错——Cannot read properties of null (reading ‘getAttribute‘)