第64篇一对多之学生端修改私有白板并保存（三）及私有白板传到老师端

关键词：学生端修改私有白板并保存, 私有白板传到老师端

一、私有白板向老师端传图片数据

1.1 本地服务器运行平台

老师端：https://localhost:9101/demos/index.html?roomid=888&t=600

学生一：

https://localhost:9101/demos/student.html?studentId=1001&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1479740395ZMJkiF.jpg&t=600#888

学生二：                   

https://localhost:9101/demos/student.html?studentId=1002&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480494624FDjMGetutor.png&t=600#888

学生三：

https://localhost:9101/demos/student.html?studentId=1003&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480475198N2F0kntutor.png&t=600#888

1.2 学生端保存共享白板

1）描述

   现在学生端需要一个保存按钮，用于保存共享白板上的某一张，追加到其私有白板上，供学生以后查看。

2）去掉了----------student.html

   新建白板去掉了（准确来说是隐藏了），并且把所有的_qhzp改成了PWBS（私有白板学生），并且把globelIdPWBS = this.id.substr(19);改为了globelIdPWBS =this.id.substr(18);因为_qhzp长度为5，PWBS长度为4。

3）saveSharetoPri()----------student.html

保存做好了，代码如下：

   //保存共享白板到学生的私有白板

         functionsaveSharetoPri(){

                  varimgIdPWBS = $("#picWrapPWBS .picContentPWBS").children().length-1;

                  designer.saveImg('image/png',imgIdPWBS, function(dataURLPWBS, imgIdPWBS) {

       var  page_index_divPWBS = imgIdPWBS+ 1;

       var imgContentPWBS = ' <span class="img_divPWBStea_base64_selectPWBS"><img id= "arr_base64_imgPWBS' + imgIdPWBS + '"name="thumbnailPWBS" class="tea_base64PWBS " src='+dataURLPWBS +'><span class="page_index_divPWBS">' +page_index_divPWBS + '</span> </span>';

       $(imgContentPWBS).appendTo($("#picWrapPWBS .picContentPWBS"));

       });

         }

4）建个数组，使学生端老板老师能查到

  分析：学生保存老师的共享白板，也要传到老师那里去。

代码实现了，如下：

a.)新建一个数组如下：

vardataURLSPriTShaArr = new Array();

b.)学生私有白板数据压到数组里去

dataURLSPriTShaArr.push(dataURLPWBS);//追加私有白板到数组中传到老师那边去

c.)学生端共享白板数据压到数组里去

dataURLSPriTShaArr.push(dataURLPWBS);//追加共享白板到数组中传到老师那边去

d.)发到老师端如下：

    if (event.data.askStudentId == studentId) {

        connection.send({

            studentPri: true,

            studentId:studentId,

            stuPriDataURLArr: dataURLSPriTShaArr

        });

    }

e.)老师端接收如下：

   //获取指定学生私有白板图片数组并展示

    if (event.data.studentPri){

        //把收到的私有白板数组展示出来，供老师查看

         stuPriUrlIdArray =event.data.stuPriDataURLArr;

       if(isArray(stuPriUrlIdArray) && stuPriUrlIdArray.length){

            $('#picContentStuPri').html("");

            for (var i = 0; i <stuPriUrlIdArray.length; i++) {

                if(isArray(stuPriUrlIdArray)){

                                   dataURL_Pri =stuPriUrlIdArray[i];

                                       varj = i+1;

                                       varpageIndexPri = i + 1;

                                       varimgContentPri = ' <span class="img_divStuPritea_base64_selectStuPri"><img id= "arr_base64_imgStuPri' + j + '"src = "'+dataURL_Pri+'" name="thumbnailStuPri" class="tea_base64StuPri"><span class="page_index_divStuPri">' + pageIndexPri +'</span> </span>';

                                       $(imgContentPri).appendTo($("#picWrapStuPriPic.picContentStuPri"));

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

                                       $(".tea_base64StuPri").on("click",onImgClickPrivate);

                }

           }

        }

        return;

    }

5）现在有个新问题

   就是老师端和学生端显示的私有白板不一样，具体如下：

老师端和学生端第4张和第5张反了，如下：

这个问题再议！

2017年3月5日星期日