微信聊天系统之发送图片

发送图片分为三种情况

• 表情包的发送
• 本地图片的发送
• 截图之后ctrl+v发送

表情包的发送

因为表情包是每个客户端都有的，那么只需要获取好友发送给用户的表情包是哪个，并取出来显示即可

//初始化表情列表
function initEmoji() {
  for(var i=69;i>0;i--){
    $('#emojiWrapper').append(
      '<img src="/emoji/'+i+'.gif">'
    )
  }
}

选择表情之后，获取该表情的下标，并在textarea里面显示为[emoji:下标]的形式，在
数据库里面以字符串[emoji:下标]的形式储存

 $("#emojiWrapper img").click(function () {
     src=$(this).attr("src");
     msg=$("#messageInput").val();
    $("#messageInput").val(msg+"[emoji:"+src.slice(7,-4)+"]");
  });

点击发送后与之前的发送消息一样

function doSend() {
    var msg=$('#messageInput').val();
    $('#messageInput').val('');
    socket.emit('private message',uid,fid,msg);
    displayNewMsg('me', msg);
    return false;
}

把表情显示出来

function displayNewMsg(user, msg) {

     msg=displayEmoji(msg);

    $("#v"+fid).append('<li class="'+(user === "me" ? "me" : "other")+'">'+
        '<div class="time">'+
        '<span>time</span>'+
        '</div>'+
        '<div class="msg">'+
        '<img src="/images/2.jpg" class="img-rounded">'+
        '<p>'+msg+'</p>'+
        '</div>'+
        '</li>'
    );
    $("#v"+fid).scrollTop($("#v"+fid)[0].scrollHeight);
}

//判断消息中是不是有表情，有就更改msg
function displayEmoji(msg){
  var reg = /\[emoji:\d+\]/g;
  var match;
  var emojiIndex;
  var result=msg;
  //用正则表达式来判断这条消息里面有没有表情的信息,有的话就替换成<img>的形式，将表情显示出来
  while(match = reg.exec(msg)){
      emojiIndex=match[0].slice(7,-1);
      result=result.replace(match[0], '<img src="/emoji/'+emojiIndex+'.gif">');
  }
  return result;
}

发送本地的图片给好友

使用base64实现socket.io传输图片和声音文件
利用FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
浏览器端的代码使用readAsDataURL()得到base64 encoded string
readAsDataURL：该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
上传图片

           <label id="showImage">
                    <input id="image" type="file" name="file" value="file" accept="image/*"/>
                    <i class="fa fa-picture-o"></i>
            </label>

chat.js 触发上传事件后

 $('body').on('change','#image',doSendImage);
//发送图片
function doSendImage(){
  var file = this.files[0],
    reader = new FileReader();
  reader.onload = function(e) {
     socket.emit('sendImg',uid,fid, e.target.result);
     displayNewImg('me',e.target.result);
};
  reader.readAsDataURL(file);
}
//图片的显示
function displayNewImg(user,img){
  $("#v"+fid).append('<li class="'+(user === "me" ? "me" : "other")+'">'+
    '<div class="time">'+
    '<span>time</span>'+
    '</div>'+
    '<div class="msg">'+
    '<img src="/images/2.jpg" class="img-rounded">'+
    '<img class="ownImg" src="'+img+'"/>'+
    '</div>'+
    '</li>'
  );
  $("#v"+fid).scrollTop($("#v"+fid)[0].scrollHeight);
}

www 服务器端的代码与一般的文本信息发送无异：

 socket.on('sendImg',function (uid,fid,img) {
    var status;

    if(online.indexOf(fid)!==-1){
      status = 1;
      sockets[users[fid]].socket.emit('newImg',fid,img);
    } else{
      // 如果不在线的话，状态为0
      status = 0;
    }
    var data={
      userId: uid,
      from: uid,
      to: fid,
      status: status,
      content: img
    }
    //将图片转换成的编码作为消息存到数据库中去
    dbHelper.addMsg(data,function (success,doc) {
      console.log("right");
    });
  });

截图之后ctrl+v发送

原理和发送本地图片一样，同样是转为base64编码，就是一开始要触发paste事件，并获得paste之后的值
chat.js添加paste事件

 $('body').on('paste','#messageInput',doPaste);
//ctrl+v粘贴之后发送图片
function doPaste(e){
    var clipboardData = e.originalEvent.clipboardData;
    if(clipboardData) {
        for(var i = 0; i < clipboardData.items.length; i++) {
          var c = clipboardData.items[i];
          var file = c.getAsFile();
          var reader = new FileReader();
          reader.onload = function(e) {
              socket.emit('sendImg',uid,fid,e.target.result);
              displayNewImg('me',e.target.result);
          }
          reader.readAsDataURL(file);
        }
    }
}

由于初始化历史消息的时候，要区分base64编码和文字信息
更改初始化消息事件

//选择好友聊天时，初始化与好友的聊天记录
function initMsg() {
    $.ajax({
        type: "POST",
        url: "/users/initMsg",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({
            'userId': uid,
            'fid': fid
        }),
        success: function (data) {
            for(var i=0; i<data.length;i++) {
                var fromID=data[i].from;
                var toId=data[i].to;
                if(uid == fromID) {
                    if(fid==toId) {
                        if(data[i].content.indexOf(';base64,')!=-1){
                            displayNewImg('me',data[i].content);
                        }else{
                            displayNewMsg('me', data[i].content);
                        }
                    }
                } else if(fid == fromID) {
                    if(uid ==toId){
                        if(data[i].content.indexOf(';base64,')!=-1){
                            displayNewImg(fid,data[i].content);
                        }else{
                            displayNewMsg(fid, data[i].content);
                        }
                    }
                } else {
                    console.log("the news chat with others");
                }
            }
        }
  });
}

获取粘贴事件不能直接用e.clipboardData
要用e.originalEvent.clipboardData;
参考网址:http://stackoverflow.com/questions/2787669/get-html-from-clipboard-in-javascript