第60篇一对多之学生端私有白板图片保存及学生传数组过去不再单张传周三

本文主要是介绍第60篇一对多之学生端私有白板图片保存及学生传数组过去不再单张传周三,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

关键词:学生端私有白板图片保存,学生传数组过去不再单张传

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

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)问题描述

    现在学生端获取私有白板上图片时,学生点一次“下一张”,这张图片就上传到了老师端,并清空了白板,但没写东西,再次点的话,可能就上传了一张空页到老师端,需要控制一下。

1.3学生端私有白板图片保存

  1描述

学生端私有白板,学生要保存一份过往图片,供自己查看。

2实现代码如下:

  adiv及查看按钮如下:----------------------student.html中

        <divid="picWrap_student_private">

        </div>

<li><a id="seeStuPriWB"οnclick="getStuPriWB();">查看</a></li>

  b控制函数----------------------student.html中

    //2)获取私有白板图片数据供学生自己查看--------------------------------------2)

    function getStuPriWB() {

        var content =$("#picWrap_student_private").html();

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

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

                var dataURLPri= stuPriDataURLArr[i];

                varpageIndexPri = i + 1;

                varimgContentPri = ' <divclass="img_div_student_private"><img  id= "student_arr_base64_img_pri' +pageIndexPri + '" name="thumbnail_student_pri"class="tea_base64_student_pri tea_base64_select_student_pri"src="' + dataURLPri + '"><divclass="page_index_div_student_private">' + pageIndexPri +'</div> </div>';

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

            }

        }

    }

注:还有一个问题是,学生在查看私有白板时,允许他修改,并且能把修改的图片替换掉原来的图片上传老师端,还要在学生端私有白板主页上显示。

1.4 老师拉学生私有白板到共享白板上

1描述

  老师查看学生的私有白板上的内容,要给学生讲时,要拉到共享白板上去。

2学生传数组过去,不再单张传

  实现了代码如下:

a.学生端每次点下一张存到数组里---student.html

//3)学生端私有白板每次点下一张,图片存入一个数组中,并清空白板-----------------3)    stuPriDataURLArr = newArray();

   function studentPriDataURL(){

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

           stuPriDataURLArr.push(dataURL);

       });

       //清空学生端私有白板

       designer.undoPrivate();

    }

 

b.老师要看哪个学生的作业,先发消息请求--------index.html

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

             connection.send({askStudentId:1001});

   });

c.id为1001的学生接到消息后,把数组传过去----student.html

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

       connection.send({

           studentPri: true,

           studentId:studentId,

           stuPriDataURLArr: stuPriDataURLArr

       });

    }

d.老师收到数组后,展示出来--------------------index.html

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

   if (event.data.studentPri) {

       //把学生id及学生传过来的私有白板图片追加到数组中,供老师查看

       var stuPriUrlIdArray = event.data.stuPriDataURLArr;

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

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

           if(isArray(stuPriUrlIdArray)){

                              dataURL_Pri =stuPriUrlIdArray[i];

                                   var j = 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);

           }

      }

        stuPriUrlIdArray = [];

       return;

    }

3)学生私有白板数组加到老师共享白板上去

二、php

2.1PHP array_search() 函数

1定义和用法

array_search() 函数在数组中搜索某个键值,并返回对应的键名。

2语法

array_search(value,array,strict)

3)看个例子一如下:

注:这个函数用于搜索一个数组中的值,返回一个键名,第三个参数(默认为false)为true,则比较值和类型,为false则只比较值。为false时,如果存在多个相同的值,则仅返回最前面的那个,如下:

2017年3月1日星期三

这篇关于第60篇一对多之学生端私有白板图片保存及学生传数组过去不再单张传周三的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/587305

相关文章

C++初始化数组的几种常见方法(简单易懂)

《C++初始化数组的几种常见方法(简单易懂)》本文介绍了C++中数组的初始化方法,包括一维数组和二维数组的初始化,以及用new动态初始化数组,在C++11及以上版本中,还提供了使用std::array... 目录1、初始化一维数组1.1、使用列表初始化(推荐方式)1.2、初始化部分列表1.3、使用std::

C++ Primer 多维数组的使用

《C++Primer多维数组的使用》本文主要介绍了多维数组在C++语言中的定义、初始化、下标引用以及使用范围for语句处理多维数组的方法,具有一定的参考价值,感兴趣的可以了解一下... 目录多维数组多维数组的初始化多维数组的下标引用使用范围for语句处理多维数组指针和多维数组多维数组严格来说,C++语言没

Python利用PIL进行图片压缩

《Python利用PIL进行图片压缩》有时在发送一些文件如PPT、Word时,由于文件中的图片太大,导致文件也太大,无法发送,所以本文为大家介绍了Python中图片压缩的方法,需要的可以参考下... 有时在发送一些文件如PPT、Word时,由于文件中的图片太大,导致文件也太大,无法发送,所有可以对文件中的图

java获取图片的大小、宽度、高度方式

《java获取图片的大小、宽度、高度方式》文章介绍了如何将File对象转换为MultipartFile对象的过程,并分享了个人经验,希望能为读者提供参考... 目China编程录Java获取图片的大小、宽度、高度File对象(该对象里面是图片)MultipartFile对象(该对象里面是图片)总结java获取图片

使用C++将处理后的信号保存为PNG和TIFF格式

《使用C++将处理后的信号保存为PNG和TIFF格式》在信号处理领域,我们常常需要将处理结果以图像的形式保存下来,方便后续分析和展示,C++提供了多种库来处理图像数据,本文将介绍如何使用stb_ima... 目录1. PNG格式保存使用stb_imagephp_write库1.1 安装和包含库1.2 代码解

Java实战之自助进行多张图片合成拼接

《Java实战之自助进行多张图片合成拼接》在当今数字化时代,图像处理技术在各个领域都发挥着至关重要的作用,本文为大家详细介绍了如何使用Java实现多张图片合成拼接,需要的可以了解下... 目录前言一、图片合成需求描述二、图片合成设计与实现1、编程语言2、基础数据准备3、图片合成流程4、图片合成实现三、总结前

使用Python实现图片和base64转换工具

《使用Python实现图片和base64转换工具》这篇文章主要为大家详细介绍了如何使用Python中的base64模块编写一个工具,可以实现图片和Base64编码之间的转换,感兴趣的小伙伴可以了解下... 简介使用python的base64模块来实现图片和Base64编码之间的转换。可以将图片转换为Bas

css实现图片旋转功能

《css实现图片旋转功能》:本文主要介绍了四种CSS变换效果:图片旋转90度、水平翻转、垂直翻转,并附带了相应的代码示例,详细内容请阅读本文,希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo

vscode保存代码时自动eslint格式化图文教程

《vscode保存代码时自动eslint格式化图文教程》:本文主要介绍vscode保存代码时自动eslint格式化的相关资料,包括打开设置文件并复制特定内容,文中通过代码介绍的非常详细,需要的朋友... 目录1、点击设置2、选择远程--->点击右上角打开设置3、会弹出settings.json文件,将以下内

C#实现添加/替换/提取或删除Excel中的图片

《C#实现添加/替换/提取或删除Excel中的图片》在Excel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更加美观,下面我们来看看如何在C#中实现添加/替换/提取或删除E... 在Excandroidel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更