Web 端集成融云 SDK 如何发送正确图片消息给移动端展示？

融云 RongCloud

关注

发布于: 2021 年 03 月 16 日

前言

Web 端使用融云的即时通讯 SDK 在发送图片消息给移动端的时候，移动端一般会收到一个缩略图数据和展示高清图片地址，但是往往 Web 端发送的图片消息总数不对，所以咋们聊一聊 Web 端如何正确发送图片消息

总结步骤如下：

1、如何拿到高清图片地址 <imageUri>2、如何生成缩略图数据 <content>

首先要对发送图片消息的参数要有所了解

下面是融云提供发送图片消息的代码：

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);

复制代码

});

复制代码

下面是参数说明

如何拿到高清图片地址 <imageUri>

根据融云上传图片文档的描述来开发即可......这里不多描述了，以免占篇幅，详情可以访问这个网站：https://docs.rongcloud.cn/v4/views/im/noui/guide/private/msgmanage/msgsend/web.html#ImgMsg

如何生成缩略图数据 <content>

什么是缩略图? 在融云文档定义的缩略图是 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 + 正则 把前缀替换成空

复制代码

发布于: 2021 年 03 月 16 日阅读数: 17

融云 RongCloud

关注

还未添加个人签名 2021.01.26 加入

还未添加个人简介

发布

暂无评论

创作场景

Web 端集成融云 SDK 如何发送正确图片消息给移动端展示？

前言

如何拿到高清图片地址 <imageUri>

如何生成缩略图数据 <content>

融云 RongCloud

评论