第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日星期五
