第56篇一对多实现之私有白板向老师端传图片数据（三）仿制传图片dataURL及array_replace及array_replace_recursive

最新推荐文章于 2022-08-12 14:28:21 发布
最新推荐文章于 2022-08-12 14:28:21 发布
阅读量547 收藏 1
点赞数 1
分类专栏： 一对多实现 私有白板向老师端传图片数据 仿制传图片dataURL array_replace array_replace_recursive 文章标签： 私有白板向老师端传图片数据 仿制传图片dataURL 仿制传图片dataURL array_replace array_replace_recurs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SanBaDao/article/details/57101625
版权

关键词：一对多实现,私有白板向老师端传图片数据, 仿制传图片dataURL, 仿制传图片dataURL, array_replace,array_replace_recursive

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

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 UI图

1.3 仿制传图片dataURL

看看老师端往学生端传图片url是怎么传的？今天仿照现有的传图片dataURL，自己写了一个，共需要复制五个地方，具体如下：

1）复制一

   来自canvas-designer-widget.js

    //第一处复制--------------------------------begin---------------------1

    var saveImgListener =function(dataUrl,imgId){};

    var saveImgListenerB =function(dataUrl,imgId){};

//第一处复制----------------------------------end---------------------1

2）复制二

来自canvas-designer-widget.js

        //第二处复制---------bengin-----------------------------------------------------------2

        if (!!event.data.imgDataURL){

           saveImgListener(event.data.imgDataURL,event.data.imgId);

        }

        if (!!event.data.imgDataURLB){

           saveImgListenerB(event.data.imgDataURLB,event.data.imgId);

        }

        //第二处复制---------end---------------------------------------------------------------2

3）复制三

来自canvas-designer-widget.js

   //第三处复制---------begin---------------------------------------------------------------3

    //用于传图像id

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

        saveImgListener = callback;

       

        if (!designer.iframe) return;

        designer.postMessage({

            saveImg: true,

            format: format,

            imgId:imgId

        });

    };

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

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

        saveImgListenerB = callback;

       

        if (!designer.iframe) return;

        designer.postMessage({

            saveImgB: true,

            format: format,

            imgId:imgId

        });

    };

   //第三处复制---------end---------------------------------------------------------------------3

4）复制四

来自widget.js

            //第四处复制---------begin---------------------------------------------------------------4

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

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

                return void window.parent.postMessage({

                    imgDataURL: dataURL,

                    imgId: event.data.imgId,

                    uid: uid

                }, "*")

            }

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

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

                return voidwindow.parent.postMessage({

                    imgDataURLB: dataURL,

                    imgId: event.data.imgId,

                    uid: uid

                }, "*")

            }

            //第四处复制---------end-----------------------------------------------------------------4

5）复制五

来自widget.min.js

            //第五处复制---------begin---------------------------------------------------------------5

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

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

                               return voidwindow.parent.postMessage({

                                       imgDataURL:dataURL,

                                       imgId:event.data.imgId,

                                       uid: uid

                               }, "*")

                      }

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

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

                               return voidwindow.parent.postMessage({

                                       imgDataURLB:dataURL,

                                       imgId:event.data.imgId,

                                       uid: uid

                               },"*")

                      }

            //第五处复制---------end-----------------------------------------------------------------5

1.4 学生端向老师端传图片dataURL

1）学生端共享白板向学生端传dataURL成功，代码如下：

 a.学生端(student.html)发送dataURL代码如下：

注：这里面有两个注意点，一是studentPriWBData参数的作用，这是发消息给老师端，老师端接收时用的。第二个注意点是：向老师端发消息，不仅可以发单个的消息如send(“dddfd”)，也可以向上述截图中，发三个参数。

b.老师端（index.html）代码如下 ：

注：这个就用到了传递的参数studentPriWBData，因为设置的是true，所以可以获取到的dataURL如下：

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

二、php

2.1PHP array_replace() 函数

1）定义和用法

array_replace() 函数使用后面数组的值替换第一个数组的值。

提示：您可以向函数传递一个数组，或者多个数组。

如果一个键存在于第一个数组 array1 同时也存在于第二个数组 array2，第一个数组 array1 中的值将被第二个数组 array2 中的值替换。如果一个键仅存在于第一个数组 array1，它将保持不变。（详见下面的实例 1）

如果一个键存在于第二个数组 array2，但是不存在于第一个数组 array1，则会在第一个数组 array1 中创建这个元素。（详见下面的实例 2）

如果传递了多个替换数组，它们将被按顺序依次处理，后面数组的值将覆盖之前数组的值。（详见下面的实例 3）

提示：请使用 array_replace_recursive() 来递归地使用后面数组的值替换第一个数组的值。

2）语法

array_replace(array1,array2,array3...)

3）看个例子一如下：

如果一个键存在于第一个数组array1 同时也存在于第二个数组 array2，第一个数组 array1 中的值将被第二个数组 array2 中的值替换。如果一个键仅存在于第一个数组 array1，它将保持不变。

注：数组的替换，键值一样则换掉，没有的则加到原数组后面去。

4）看个例子二如下：

注：如果数组中有的有键名，有的没有的话，则没有的从0开始记录。

5）看个例子三如下：

使用三个数组 - 最后一个数组（$a3）将覆盖之前数组（$a1 和 $a2）：

注：三个数组时，第二个替换第一个，第三个替换之前返回的结果。

6）看个例子四如下：

使用数值键 - 如果一个键存在于第二个数组array2，但是不存在于第一个数组 array1，则会在第一个数组 array1 中创建这个元素：

2.2 PHParray_replace_recursive() 函数

1）定义和用法

array_replace_recursive() 函数递归地使用后面数组的值替换第一个数组的值。

提示：您可以向函数传递一个数组，或者多个数组。

如果一个键存在于第一个数组array1 同时也存在于第二个数组 array2，第一个数组 array1 中的值将被第二个数组 array2 中的值替换。如果一个键仅存在于第一个数组 array1，它将保持不变。如果一个键存在于第二个数组 array2，但是不存在于第一个数组 array1，则会在第一个数组 array1 中创建这个元素。如果传递了多个替换数组，它们将被按顺序依次处理，后面数组的值将覆盖之前数组的值。

注释：如果没有为每个数组指定一个键，该函数的行为将等同于 array_replace()函数。

2）语法

array_replace_recursive(array1,array2,array3...)

3）看个例子一如下：

注：这个函数是对二维数组进行替换的。

4）看个例子二如下：

注：这个例子很好的说明了array_replace与函数array_replace_recursive的区别，它们的区别是：前者替换是只要键名相同，就进行替换，不管维数，而后者则还要进行维数的比较，只替换有限的元素，而不是整个数组进行替换，就是说后者比较的更细。

2017年2月25日星期六

编个球编个大气球
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C#base64转换为图片
东方雨舞
04-26 4624
public string Base64ToImage(string dataURL,string username) { try { dataURL = dataURL.Replace("data:image/png;base64,", "").Replace("data:image/jgp;base64,", "").Replace("data:image/jpg;base64,", "").Replac...
【牛课题】使用replace获取url参数
taotao3158的博客
10-12 1160
通常 replace(正则表达式, 要替换的值)，要替换的值也可以是个返回字符串的函数，但这个函数大有问题 获取url中的参数 const url = 'http://www.nowcoder.com?key=6&key=5&key=4&test=3#hehe' function getQuery(url, key) { const reg = /\??(\w+)=(\w+)/g const res = {} url.replace(reg, func
PHP函数array_replace_recursive
mianhuatangVSyeyu的博客
10-28 193
array_replace_recursive用后面所有数组中的相同键的值替换第一个数组的键值,递归替换。 如果第一个数组中的键存在于第二个数组中，那么它的值将被第二个数组中的值替换。 如果对应的位置都是数组，则递归替换 示例： $first = [ 'name' => ['Jack'], 'addr' => ['a' => 'AUS', 'b' => 'Korias'], 'boy' ]; $second = [ 'name' =>
PHP数组函数 array_replace_recursive (使用传递的数组递归替换第一个数组的元素)
ztnhnr的专栏
12-19 211
在PHP中，数组函数 array_replace_recursive() 使用传递的数组递归替换第一个数组的元素。 函数语法： array_replace_recursive(array$array1[,array$array2,array$array3,...]):array 函数参数说明： 参数 描述 array1 必需。指定一个数组。 array2 可选。指定一个要替换array1的值的数组。 array3,....
php 递归修改数组,php array_replace_recursive 递归地使用后面数组的值替换第一个数组的值...
weixin_29124971的博客
03-12 257
array_replace_recursive — 使用传递的数组递归替换第一个数组的元素说明array array_replace_recursive ( array $array1 , array $array2 [, array $... ] )array_replace_recursive() 使用后面数组元素的值替换数组 array1 的值。 如果一个键存在于第一个数组同时也存在于第二个...
浅析图片上传及canvas压缩的流程
01-21
我们通常在做图片上传的时候都会遇上这样的情况，一是后端接口限制上传图片的大小，或者是即使后端没有限制大小，因为图片太大在前端渲染时太慢，造成页面加载体验较差。因此我们很有必要对上传的图片进行压缩。 ...
PHP 将dataurl转成图片image方法总结
10-21
主要介绍了PHP 将dataurl转成图片image方法的相关资料,这里提供了两种方法及实现方式，需要的朋友可以参考下
HTML5图片dataURL转换工具特效代码
03-20
HTML5图片dataURL转换工具，可将图片转成dataURL，或者将dataURL转回图片。使用html5 filereader方法，挺实用的工具，收藏放电脑，以后不用再找在线工具了。
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
11-27
将图片转为base64的好处 将图片转换为Base64编码，可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑...在这个场景中，我们首先推断该图片路径是可访问的，同时还需要一种将图片转换到 dataURL 的方法
array_replace_recursive
weixin_43994373的博客
07-04 124
PHP 函数 ：array_replace_recursive（array a1,a1,a1,array $a2） 解析：讲数组1的元素替换成数组2 $a1=[ ‘a’=>‘aaa’, ‘b’=>‘bbb’, ]; $a2=[ ‘a’=>‘aaa1’, ‘b’=>‘bbb1’, ]; key相同 元素替换。 ...
用JS快速开发的代码白板
08-10
实时的「代码白板」，可聊天。远程面试、远程解答问题的得力助手。
javascript实现的白板效果(可以直接在网页上写字)
12-03
代码如下: [removed] var ball; var mouseX = 100; var mouseY = 100; var angle = 0; var radius = 0; function draw(){ ball = document.createElement(“span”); ball.style.position = “absolute”; ball.style.color = “#FF0000”; ball.style.zIndex = 999999999; ball[removed] = “●”; document.bod
js电子白板
07-30
用 nodejs+websocket+canvas 实现的电子白板demo 功能齐全，适合参考学习
php + array_merge array_replace_recursive
weixin_39560112的博客
08-12 113
的值替换第一个数组（
java提取图片base64,如何把
weixin_33443597的博客
03-10 467
问题： 在前端如何将image转成base64编码？回答：要实现这个功能，要使用canvas来做，Canvas里面提供了一个toDataURL的接口，可以用这个接口获得图片的base64所以思路是：获得canvas对象加载图片到canvas对象里面从canvas对象中获取base64数据我给个例子Documentfunction getBase64Image(img) {var canvas = ...
第55篇一对多实现之私有白板向老师端传图片数据（二）及array_reduce
二刀流的博客
02-25 784
关键词：一对多实现, 私有白板向老师端传图片数据, array_reduce 一、私有白板向老师端传图片数据 1.1 服务器运行平台 老师端：https://123.57.206.36:9100/demos/index.html?roomid=888 学生一： https://123.57.206.36:9100/demos/student.html?studentId=1001&us
第47篇一对多实现（四）学生端向老师端传id及头像及php键值函数
二刀流的博客
02-17 577
关键词：一对多实现, 学生端向老师端传id及头像, array_intersect_ukey, array_key_exists, array_keys 一、一对多实现 1.1 运行平台 老师端：https://123.57.206.36:9100/demos/index.html 学生端：https://123.57.206.36:9100/demos/student.html 1.
第57篇一对多实现之私有白板向老师端传图片数据（四）新建一个iframe及成功获取私有白板数据 周日
二刀流的博客
02-27 550
关键词：私有白板向老师端传图片数据, 新建一个iframe, 成功获取私有白板数据 一、私有白板向老师端传图片数据 1.1 服务器运行平台 老师端：https://123.57.206.36:9100/demos/index.html?roomid=888 学生一： https://123.57.206.36:9100/demos/student.html?studentId=10
如何接入一个全平台实时互动白板
weixin_34220834的博客
10-31 1844
white 是一款全平台支持的实时互动白板，可以用于在线教育、会议、远程协作、设计审查、PPT 演示等场景。 white 官方网站 我们在官网上做了详细的产品介绍，让用户可以更深入的了解 white 在教育、协作、会议等场景下的创新和优势。 点击查看官网 white web app 针对个人用户和小团队用户： 我们提供了开箱即用的 White App。White App 覆盖了 iOS、An...
java todataurl_利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
最新发布
05-19
在使用canvas绘制图片时，可以通过toDataURL()方法将图片转换为dataURL格式（base64编码），方便在网页中显示或传输。下面是利用canvas中toDataURL()将图片转为dataURL的详细步骤： 1. 创建一个canvas元素 ```javascript var canvas = document.createElement("canvas"); ``` 2. 设置canvas的宽度和高度 ```javascript canvas.width = img.width; canvas.height = img.height; ``` 3. 在canvas上绘制图片 ```javascript var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); ``` 4. 调用toDataURL()方法获取dataURL ```javascript var dataURL = canvas.toDataURL("image/png"); ``` 其中，toDataURL()方法的参数表示输出格式，常见的有"image/png"、"image/jpeg"等。 完整代码示例： ```javascript var img = new Image(); img.onload = function() { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL("image/png"); console.log(dataURL); }; img.src = "example.png"; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值