共计 1554 个字符，预计需要花费 4 分钟才能阅读完成。
前言
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/new…’ // 上传到服务器的 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 + 正则 把前缀替换成空
