第62篇一对多之学生端修改私有白板并保存及array_shift

关键词：学生端修改私有白板并保存, array_shift

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

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）分析：

单击过往图片的任一张，需要做两件事：

一是上传到当前私有白板，单击另一张时替换当前id的dataURL；

二是拿着id，更新数组，方便下一次查看时，更新。

2）现在想想

   完全可以按老师端来做，所以，推倒重来，现在保存已实现，页码显示还有点问题。相关代码如下：

var globelIdStuPri = 0;

         $('#btn-getDataURL-studentPri').click(function(){//--------------------------aaaa

 

             //当老师端新建白板时，要向学生端发个消息，也新建白板

             stu_pri_arr_base64_img_i =$("#picWrap_student_private .picContentStuPrivate").children().length- 1;

             saveCanvasStuPri(globelIdStuPri);//主要保存的是dataURL

               // return;

             designer.undo('all');

             createImgStuPri(stu_pri_arr_base64_img_i);

 

             globelIdStuPri = stu_pri_arr_base64_img_i;

         });

   stuPriDataURLpage = 0;

   stuPriDataURLArr = new Array();

   function saveCanvasStuPri(globelIdStuPri){//------------------------------bbbb

 

       designer.saveImgPrivate('image/png',globelIdStuPri,function(dataURL,globelIdStuPri) {

           stuPriDataURLArr.push([dataURL,globelIdStuPri]);

           refreshStuPri(dataURL, globelIdStuPri);

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

           $(".tea_base64_student_pri").on("click",stuOnImgClickPrivate);

       });

 

       //清空学生端私有白板

       designer.undoPrivate();

       stuPriDataURLpage++;

    }

         functionrefreshStuPri(dataURL, globelIdStuPri){//------------------------------------------------cccc

             $("#student_arr_base64_img_pri" +globelIdStuPri).attr("src", dataURL);

         }

 

         functioncreateImgStuPri(imgId) {

             $("[name =thumbnail_student_pri]").parent().removeClass("tea_base64_student_pri");

             varpageIndexPri = imgId + 1;

             var imgContentPri = ' <divclass="img_div_student_privatetea_base64_student_pri"><img id= "student_arr_base64_img_pri'

                    + pageIndexPri + '"name="thumbnail_student_pri"class="tea_base64_student_pri"><divclass="page_index_div_student_private">' + pageIndexPri +'</div> </div>';

 

 

            $(imgContentPri).appendTo($("#picWrap_student_private.picContentStuPrivate"));

         }

运行效果如下：

2）调整页码问题

   调整成功，代码如下：

a)单击函数如下：

         var globelIdStuPri = 0;

         var stu_pri_arr_base64_img_i = 1;

         $('#btn-getDataURL-studentPri').click(function(){//-------------------------------aaaa

             saveCanvasStuPri(globelIdStuPri);//主要保存的是dataURL

             createImgStuPri(stu_pri_arr_base64_img_i);

             globelIdStuPri = stu_pri_arr_base64_img_i;

             stu_pri_arr_base64_img_i =$("#picWrap_student_private").children().length+1;

         });

  b）保存函数（saveCanvasStuPri）如下：

 function saveCanvasStuPri(globelIdStuPri){//------------------------------------bbbb

       designer.saveImgPrivate('image/png',globelIdStuPri,function(dataURL,globelIdStuPri) {    

               globelIdStuPri =globelIdStuPri+1;

          $("#student_arr_base64_img_pri" +globelIdStuPri).attr("src", dataURL);        

       });

       designer.undoPrivate();

}

注：主要功能就是先给指定的div中的图片赋个dataURL，就是src属性。

  c）追加函数（createImgStuPri）如下：

         functioncreateImgStuPri(imgId) {

             $("[name =thumbnail_student_pri]").parent().removeClass("tea_base64_student_pri");

             var imgContentPri = ' <divclass="img_div_student_private tea_base64_student_pri"><img  id= "student_arr_base64_img_pri'

                    + imgId + '"name="thumbnail_student_pri"class="tea_base64_student_pri"><divclass="page_index_div_student_private">' + imgId + '</div></div>';

            $(imgContentPri).appendTo($("#picWrap_student_private"));

         }

注：我是在div中追加各个小div

d)效果如下：

3）单击保存

  描述：单击一张图片，修改后，单击另一张，保存到原来id下。

二、php

2.1 PHP array_shift() 函数

1)定义和用法

array_shift() 函数用于删除数组中的第一个元素，并返回被删除的元素。

注释：如果键名是数字的，所有元素都将获得新的键名，从 0 开始，并以 1 递增（参见下面实例）。

2)语法

array_shift(array)

3)看个例子一

注：这个函数的作用是取出数组中第一个元素，并且输出值。原数组少一个元素，针对数值型的数组，键名重新索引。不管原来的数组键名大小，再看个例子如下：

4)看个例子二----字母型的键名

注：对于字母型的键名，不进行重新索引。对于数字字母混合型的键名，数字型的会重新索引。

2017年3月3日星期五