第80篇 webrtc一对一研究（九）及php

最新推荐文章于 2024-08-15 09:50:35 发布

编个球编个大气球

最新推荐文章于 2024-08-15 09:50:35 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/sanbadao/article/details/52938087

版权

webrtc数据回调机制同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

webrtc传图片机制

1 篇文章 0 订阅

订阅专栏

php比较字符串

1 篇文章 0 订阅

订阅专栏

关键词：webrtc数据回调机制,webrtc传图片机制,php比较字符串

一、webrtc

1.1 梳理老师回放代码

1）首先有一个按钮，用于新建白板，如下：

<buttonid="btn-getDataURL1" style="width:220px;font-size:36px;">新建白板</button></span>

2）这个按钮有一个单击事件：

$('#btn-getDataURL1').click( function(){

arr_base64_img_i =$("#picWrap").children().length;

saveCanvas(globelId);

designer.undo('all');

globelId = null;

});

单击会执行一个函数，第一句：

a) arr_base64_img_i= $("#picWrap").children().length;

这一句：计算放回放图片的div内已经放了几张图片。

注：会看到两个问题，一是窗口记录不连续：0，1，2，4，5，6，7，8；二是出现了很多空白页。

b) saveCanvas(globelId)（2-1）;

这一句调用一个函数，作用是保存图像到下方。

c) designer.undo('all');

这一句用于清空白板，就是说，老师写完一板，保存到下方之后，要清空白板。

d)globelId=null;

这一句，置变量globelId为空。

3）在 2）中调用了一个函数saveCanvas(globelId)（函数2-1），代码如下：

function saveCanvas(imgId){

designer.saveImg('image/png',imgId,function(dataURL,imgId) {

getArrBase64(dataURL,imgId);

$(".tea_base64").off("click");

$(".tea_base64").on("click",onImgClick);

});

}

这个函数需要传入一个参数imgId：

a) designer.saveImg('image/png',imgId,function(dataURL,imgId) {

这一句调用了一个函数designer.saveImg()(函数3-1)，用于保存图像。

b) getArrBase64(dataURL,imgId);

在a)中调用了另一个函数getArrBase64()(函数3-2)，用于获取一个图片的base64位码。

c) $(".tea_base64").off("click");

这一句的作用是：解绑click事件。

d) $(".tea_base64").on("click",onImgClick);

这一句的作用是，给类.tea_base64绑定click事件，并且调用一个函数onImgClick(函数3-3)。

4）在3）中，引入了三个函数designer.saveImg()(函数3-1)、getArrBase64()(函数3-2)、onImgClick(函数3-3)，分别分析：

4-1) designer.saveImg()

designer.saveImg= function(format,imgId,callback) {

saveImgListener = callback;

if (!designer.iframe) return;

designer.postMessage({

saveImg: true,

format: format,

imgId:imgId

});

};

这个函数需要传三个参数format，imgId，callback：

a）saveImgListener = callback;

这一句用于回传。

b）if (!designer.iframe) return;

这一句说明，如果designer.iframe（函数4-1-1）不成立，就返回。

c） designer.postMessage({（函数4-1-2）

这一句是webrtc中用于消息传递，它需要三个参数saveImg，format，imgId，应对其分别设置。

4-2) getArrBase64()

function getArrBase64(dataURL,imgId) {

if(imgId!= null && $("#arr_base64_img"+imgId).length>0){

$("#arr_base64_img"+imgId).attr("src", dataURL);

}else{

varpicWrap=document.getElementById('picWrap');

picWrap.innerHTML+=' <img id= "arr_base64_img'+arr_base64_img_i+'"class="tea_base64" style=" border:1pxsolid red; width:100px; height:150px;" src="'+dataURL +'"'+"<br>";

}

};

这个函数getArrBase64需要两个参数：dataURL及imgId：

a) if(imgId != null &&$("#arr_base64_img"+imgId).length>0){

$("#arr_base64_img"+imgId).attr("src", dataURL);

}

这个判断是说如果imgId非空，并且图片id存在，就把执行if里面的内容，这一句话是说：如果老师点下面的回放图片，修改之后，点保存的话，图像id存在，就替换原来的那张图片。里面的语句，就是替换原有的dataURL，.attr就是返回标签属性，本程序中，就是把dataURL赋给属性src.

b) else{

varpicWrap=document.getElementById('picWrap');

picWrap.innerHTML+=' <img id= "arr_base64_img'+arr_base64_img_i+'"class="tea_base64" style=" border:1pxsolid red; width:100px; height:150px;" src="'+dataURL +'"'+"<br>";

}

上述几句话是说：如果老师保存的图像id不存在，就追加到后面去。

4-3) onImgClick()

function onImgClick(){

if(globelId == null){

arr_base64_img_i =$("#picWrap").children().length;

}

saveCanvas(globelId);

designer.undo('all');

globelId = this.id.substr(14);

designer.addImgByUrl(this.src,true);

}