第57篇一对多实现之私有白板向老师端传图片数据（四）新建一个iframe及成功获取私有白板数据 周日

关键词：私有白板向老师端传图片数据,
新建一个iframe,
成功获取私有白板数据

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

1.1 服务器运行平台

老师端：https://123.57.206.36:9100/demos/index.html?roomid=888

学生一：

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

学生二：                            

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

学生三：

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

1.2学生端私有白板dataURL传到老师端

  现在学生端共享白板能往老师端传图片数据，而学生端私有白板还不知道怎么传，想想办法；思路是：区分清楚两个iframe就可以了应该。

1）获取私有白板上的dataURL

  代码完成，如下：全在canvas-designer-widget.js

a.)修改一：另外定义一个iframe

designer.iframe_private = null;



b.)修改二：定义函数designer.appendPriTo

   designer.appendPriTo = function(parentNode) {

       designer.iframe_private = document.createElement('iframe');

       designer.iframe_private.src = designer.widgetHtmlPriURL +'?widgetPriJsURL=' + designer.widgetJsPriURL + '&tools=' +JSON.stringify(tools) + '&selectedIcon=' + selectedIcon;

       designer.iframe_private.style.width = '100%';

       designer.iframe_private.style.height = '100%';

       designer.iframe_private.style.border = 0;

       

       //window.removeEventListener('message', onMessage);

       //window.addEventListener('message', onMessage, false);

 

       parentNode.appendChild(designer.iframe_private);

};



c.)修改三---------把获取图片dataURL的函数写成私有的iframe

   //用于传图像id--复制

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

       saveImgListenerB = callback;

       

       if (!designer.iframe_private) return;

       designer.postMessagePrivate({

           saveImgB: true,

           format: format,

           imgId:imgId

       });

};



d.)修改四---------传消息时，也用私有的iframe

   designer.postMessagePrivate = function(message) {

       if (!designer.iframe_private) return;

       message.uid = designer.uid;

       designer.iframe_private.contentWindow.postMessage(message, '*');

};



1.3 专门写一个函数用于学生端私有白板向老师端传图片

  写成功了，如下：

1）代码复制一---------canvas-designer-widget.js中

         varsaveImgListenerPrivate = function(dataUrl,imgId){};

  注：写一个监听函数



2）代码复制二---------canvas-designer-widget.js中

                  //改3个

                  if(!!event.data.imgDataURLPrivate){

           saveImgListenerPrivate(event.data.imgDataURLPrivate,event.data.imgId);

       }

注：调用监听函数



3）代码复制三---------canvas-designer-widget.js中

//用于传图像id--复制--private--3

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

       saveImgListenerPrivate = callback;

       

       if (!designer.iframe_private) return;

       designer.postMessagePrivate({

           saveImgPrivate: true,

           format: format,

           imgId:imgId

       });

};

注：获取学生端dataURL，注意用的是私有的iframe及传消息方式。



4）代码复制四---------widget.js中

                          //改2个

                           if (uid || (uid = event.data.uid),event.data.saveImgPrivate) {

                var dataURL =context.ca
4000
nvas.toDataURL(event.data.format, 1);

                return voidwindow.parent.postMessagePrivate({

                    imgDataURLPrivate: dataURL,

                   imgId:event.data.imgId,

                    uid: uid

                }, "*")

           }

注：这个应该是传递。



5）代码复制五--------- widget.private.min.js中

                          //这个地方用私有白板获取dataURL时，也必须有

                          if(uid|| (uid = event.data.uid), event.data.saveImgPrivate){

                var dataURL =context.canvas.toDataURL(event.data.format, 1);

                                   returnvoid window.parent.postMessage({

                                            imgDataURLPrivate:dataURL,

                                            imgId:event.data.imgId,

                                            uid:uid

                                   },"*")

                          }

注：这里用的传消息方式是postMessage而不是postMessagePrivate，因为不认识postMessagePrivate，由此推想那个postMessagePrivate没什么用。



2017年2月26日星期日