WEB前端第六十五课——H5新特性：Worker线程、Files、FileReader、getUserMedia

1.Web Worker线程

　　JavaScript语言是单线程模型，通过Web Worker为JS创造多线程环境；

　　由主线程创建Worker线程，将一些任务分配给Worker运行，两者异步执行；

　　Worker完成计算任务后，再将结果返回给主线程。

 

　　优点：可以分担计算密集型或高延迟的任务，确保主线程运行会更加流畅；

　　缺点：Worker一旦创建成功，为随时响应主线程通信，如不主动关闭结束，

　　　　　会一直运行，造成资源耗费。

　　代码示例：

<script> // 调用Worker()构造函数，创建worker线程。 // 由于Worker不能读取本地文件，因此其参数只能是脚本地址。 var myWorker=new Worker('myWorker.js'); //主线程创建监听事件，接收子线程返回的信息。 myWorker.onmessage=function (event) {  console.log(event);  //子线程返回的信息为对象，其中，通过data属性可以回去返回数据。  console.log('Receive msg:'+event.data);  if(event.data>18){   //主线程中使用"terminate()"方法结束Worker子线程   myWorker.terminate();  }  clearTimer(); } function clearTimer() {  //向子线程后台发送消息，使用"postMessage()"方法，该方法在主线程和子线程通用。  myWorker.postMessage('Stop'); } console.log('Hello world.'); //先于Worker线程执行。</script>

// 创建Worker脚本任务var n=0;self.postMessage(n);var timer=setInterval(function () { n+=3; //返回数据结果 postMessage(n);},1000);//添加消息事件监听，使用"addEventListener"或"onmessage()"两种方式都可以。self.addEventListener('message',function (e) { if (e.data=='Stop'&&n>15){  clearInterval(timer);  postMessage('The Worker stopped!')  //返回消息给主线程。  //子线程中使用"close()"方法关闭Worker线程。  self.close(); }},false);

2.文件操作

　　文件上传标签：<input type='file'/>

　⑴ files集合

　　　　H5中所有"file"类型的元素都具有files属性，files为包含一组file对象的集合。

　　　　每个file对象都具有上传文件的所有信息，包括：name、size、type、lastModifiedDate等。

　　　　通过侦听"change"事件并读取Files集合，可以获得每个文件对象的属性信息。

　　代码示例：

<body> <input type="file" id="upLoadFile" multiple/> <div id="fileInfo"></div> <script>  var file=document.querySelector('#upLoadFile');  var fileInfo=document.querySelector('#fileInfo');  file.onchange=function () {   console.log(this.files); //结果为对象类型数据，文件列表。   var fileInfoArr=[];   for (var i=0;i<this.files.length;i++){    var fileData=file.files[i];    var j=i+1;    var fileInfoTemp='<br>第'+j+'个文件<br/>'+'名称：'+fileData.name+'<br/>类型：'+fileData.type+     // 计算文件大小时，可利用"Math.round()"方法进行四舍五入。     '<br>大小：'+Math.round((fileData.size/1024/1024)*100)/100+'M<br>修改时间：'+     fileData.lastModifiedDate.toGMTString()+'<br/>';  //可利用"toGMTString"或"toUTCString"方法转换时间格式。    fileInfoArr.push(fileInfoTemp);   }   console.log(fileInfoArr);   fileInfo.innerHTML=fileInfoArr.join(''); //将数组转换为字符串，并进行赋值。   console.log(fileInfo.innerHTML);  } </script></body>

　⑵ FileReader构造函数，

　　　　File API提供了FileReader接口用于读取文件数据。

　　　① FileReader属性：

　　　　　　error，读取文件时发生的错误，

　　　　　　　　错误码code：1-未找到文件、2-安全性错误、3-读取中断、4-不可读取、5-编码错误

　　　　　　readyState，FileReader对象的当前状态，状态常量包括三个：

　　　　　　　　常量名　　　　值　　　　描述

　　　　　　　　EMPTY　　　　0　　　　还没有加载任何数据

　　　　　　　　LOADING　　　1　　　　数据正在加载中

　　　　　　　　DONE　　　　  2　　　　已完成全部读取任务

　　　　　　result，表示读取到的文件内容，该属性只有在读取操作完成后才有效，

　　　　　　　　　　读取数据的格式取决于读取操作使用的哪种方法。

　　　② FileReader接口有4个操作方法（前两个为核心方法）：

　　　　　　readAsText(file或Blob,encoding)，以纯文本形式读取File或Blob对象的内容，

　　　　　　　　第二个参数（可选）用于指定编码类型，默认为"UTF-8"；

　　　　　　readAsDataURL(file或Blob)，将文件读取为DataURL格式（Base64编码）；

　　　　　　readAsBinaryBuffer(file或Blob)，将文件读取为二进制编码形式；（已废弃）

　　　　　　abort()，终止该读取操作。

　　　　上述3中读取文件的方法，读取结果都保存在"result"属性中！！

　　　③ FileReader相关事件：

　　　　　　onabort，读取操作终止时调用；

　　　　　　onloadstart，读取操作开始时调用；

　　　　　　onerror，读取发生错误时调用；

　　　　　　onload，读取操作成功完成时调用；

　　　　　　onloadend，读取操作完成时调用，不论操作发生错误、中断还是成功。

　　　　　　onprogress，读取过程中周期性调用。

　　　　一般情况下，读取文件时，首先触发onloadstart事件，此时readyState状态值为1，result为空。

　　　　读取文件过程中，约每隔50ms触发一次onprogress事件，通过事件对象可以获取文件进度信息，

　　　　　　lengthComputable（是否未完成/有可计算长度）、loaded（已加载）、total（进度总长度）。

　　　　读取文件成功完成时，触发load事件，此时readyState状态值为2，result为文件内容。

　　　　如果读取文件过程中发生了错误，则触发error事件，而不会触发load事件。

 　　代码示例：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>FileReader</title></head><body> <input type="file" id="upLoadFile" multiple/> <div id="filePreview"></div> <script>  var file=document.querySelector('#upLoadFile');  var filePreview=document.querySelector('#filePreview');/*  //判断浏览器是否支持FileReader接口  if (typeof FileReader=='undefined'){   filePreview.innerHTML ='浏览器不支持FileReader接口！';  // 将文件选择控件失效。   file.setAttribute('disabled','disabled');  }else {   filePreview .innerHTML ='<p>图片预览区域</p>';  }  //创建FileReader函数——readAsDataURL()方法  function readURL(){  // 先判断选择的file对象是否为图片   var uploadFile=document.getElementById('upLoadFile').files[0];   //使用RegExp正则表达式判断文件类型是否为图片。   if (!/image\/\w+/.test(uploadFile.type)){    alert ('请选择图片文件！');    return false;   }   //创建FileReader对象实例。   var reader=new FileReader();   reader.readAsDataURL(uploadFile); //通过"readAsDataURL"方法读取图片文件url地址   reader.onload=function () {    //将读取到的图片地址拼接到显示容器，展示图片。    filePreview.innerHTML = '<img src="'+this.result+'"/>';   }  }*/    //创建FileReader函数——readAsText()方法  function readText(){   var uploadFile=document.getElementById('upLoadFile').files[0];   if (uploadFile){    //创建FileReader对象实例。    var reader=new FileReader();    //通过"readAsText"方法读取文件内容，注意编码格式参数！    reader.readAsText(uploadFile,'GB2312');    reader.onload=function () {     //将读取到到内容显示。     filePreview.innerHTML = this.result;    }   }  }  file.onchange=function () {   readText();  //调用FileReader函数   console.log(this.files); //结果为对象类型数据，文件列表。  } </script></body></html>

3.getUserMedia

　　getUserMedia()方法是H5提供的用于访问用户设备媒体（视频、音频、位置等）的API接口，

　　在新版Web标准中，getUserMedia()方法是window.navigator.mediaDevices下的一个方法。

　　语法：navigator.mediaDevices.getUserMedia(constraints);

　　说明：

　　　　⑴ navigator是window的一个只读属性，该对象包含了访问者浏览器的相关信息；

　　　　　navigator对象属性：

　　　　　　appCodeName，浏览器的代码名
　　　　　　appName，浏览器的名称
　　　　　　appVersion，浏览器的平台和版本信息
　　　　　　cookieEnabled，浏览器中是否启用 cookie 的布尔值
　　　　　　platform，运行浏览器的操作系统平台
　　　　　　userAgent，浏览器代理信息，由客户机发送服务器的user-agent头部的值

　　　　⑵ mediaDevices是Navigator的一个只读属性，返回一个MediaDevices对象，

　　　　　  该对象可提供对相机、麦克风、屏幕共享等媒体设备的连接访问，

　　　　　　并且该对象是一个单例对象，通常只需直接调用改对象的成员。

　　　　⑶ getUserMedia()方法提示用户给予使用一个视频或音频输入设备的许可，

　　　　　该方法接受三个参数，语法：

　　　　　　navigator.mediaDevices.getUserMedia(constraints,onSuccess,onError);

　　　　　　① constraints，多媒体类型设置

　　　　　　　　该参数是一个对象，用于设置多媒体类型，即获取哪些设备；

　　　　　　　　语法：{

　　　　　　　　　　　　video:true/false,　　//video参数还可以直接设置分辨率

　　　　　　　　　　　　audio:true/false

　　　　　　　　　　　};　　//两个参数中至少有一个类型被启用！

　　　　　　　　video参数值为分辨率时，语法：

　　　　　　　　　　video:{ width:1280,height:960},

　　　　　　　　设置video分辨率时，除了"width和height"，还可以使用关键字"min,max,ideal"；

　　　　　　　　如果是移动设备时，video参数还可以强制使用前置或后置摄像头，语法：

　　　　　　　　　　video:{facingMode:'user'},　　//强制使用前置摄像头

　　　　　　　　　　video:{facingMode:{exact:environment}},　　//强制使用后置摄像头

　　　　　　② promise说明

　　　　　　　　getUserMedia()方法是一个异步执行的方法，所以不会立即返回最终的值，

　　　　　　　　而是返回一个"Promise"对象，Promise对象代表了异步操作的最终完成或者失败，

　　　　　　　　当发生情况之一时，该对象绑定的相应回调函数就会被调用，返回结果也是Promise。

　　　　　　　　通常使用Promise对象的"then() 和 catch()"方法链式排列相关处理程序。

　　　　　　　　语法示例：

　　　　　　　　　　var promise = navigator.mediaDevices.getUserMedia(constraints);

　　　　　　　　　　promise.then(function onSuccess(mediaStream){...})

　　　　　　　　　　　　　  .catch(function onError(errorObj){...});

　　　　　　　　　　或者简写为：

　　　　　　　　　　navigator.mediaDevices.getUserMedia(constraints).then(onSuccess,onError);

　　　　　　　　说明：

　　　　　　　　　　then()的参数可选，catch(errorCallback) 是 then(null,successCallback)的缩略形式；

　　　　　　　　　　catch()之后可以继续接then()，进行其他链式操作。

　　　　　　③ successCallback，成功回调函数

　　　　　　　　获取多媒体设备成功时调用该回调函数。Success回调函数的参数是一个数据流对象，

　　　　　　　　数据流对象mediaStream的两个内置方法"getAudioTracks() 和getVideoTracks()"，

　　　　　　　　分别返回一个数组，数组成员是数据流包含的音轨audio和视轨video对象。

　　　　　　　　语法示例：

　　　　　　　　　　function onSuccess(mediaStream) {

　　　　　　　　　　　　var video = document.getElementById("video");

　　　　　　　　　　　　video.src = window.URL.createObjectURL(mediaStream);

　　　　　　　　　　}

　　　　　　　　说明：

　　　　　　　　　　成功（resolve）Promise对象的回调函数会带一个"MediaStream"对象作为其参数；

　　　　　　　　　　URL.createObjectURL()方法可以将媒体流转换为一个二进制对象的URL(Blob URL)，

　　　　　　　　　　该URL可以作为 video元素 src 的属性值。

　　　　　　 ④ errorCallback，失败回调函数

　　　　　　　　获取多媒体设备失败时调用该回调函数。Error回调函数接受一个error对象作为参数，

　　　　　　　　Error对象有三个属性值，

　　　　　　　　　　PERMISSION_DENIED：用户拒绝提供信息。
　　　　　　　　　　NOT_SUPPORTED_ERROR：浏览器不支持硬件设备。
　　　　　　　　　　MANDATORY_UNSATISFIED_ERROR：未发现指定的硬件设备。

　　　　　　　　语法示例：

　　　　　　　　　　function onError(error) {

　　　　　　　　　　　　console.log("错误名称： "+ error.name+"<br/>错误信息："+error.message);

　　　　　　　　　　}

　　　　⑷ 视频拍照

　　　　　　获取视频后通过 Canvas API提供的 "ctx.drawImage(video,0,0)"方法实现拍照功能，该方法

　　　　　　可以将视频的一帧转换为canvas元素，进行截图拍照。

　　　　　　语法示例：

　　　　　　　　var ctx=canvas.getContext('2d');　　//创建2d画笔

　　　　　　　　ctx.drawImage(video,0,0);　　//在画布上绘制图像

　　　　⑸ 视频、截图示例代码：

<body> <video src="" width="360" height="300" id="videoCase"></video> <input type="button" value="开始视频" onclick="startVideo()"/> <canvas width="360" height="300" id="canvas"></canvas> <button id="btn" onclick="takePhoto()">拍照</button> <script>  function startVideo() {  // 获取视频区域元素   var video=document.getElementById('videoCase');  // 设置媒体设备启动类型   var constraints={    video:{width:360,height:300}, //启动摄像头，参数可以直接写"true"    audio:true  //启动麦克风   }  // 使用"getUserMedia()"方法启动媒体设备，设备启动类型"constraints"作为参数，  // 该方法的返回值为"Promise"对象,Promise对象返回成功后，它的回调函数会带一个"MediaStream"作为参数，  // then()方式是Promise的一个"异步执行"方法，then()前面所有方法执行完成后再执行其内部的程序，避免数据获取失败或缺失！   var promise=navigator.mediaDevices.getUserMedia(constraints);   promise.then(function onSuccess (MediaStream) {    console.log(MediaStream);   //返回值：MediaStream {id: "5eDj...jdna", active: true, onaddtrack: null, onremovetrack: null, onactive: null, …}    console.log(typeof MediaStream); //返回值：object    video.srcObject=MediaStream;    console.log(video);     //返回值：<video src="<unknown>" width="360" height="300" id="videoCase"></video>    console.log(typeof video);   //返回值：object    video.play(); //或video.autoplay=true;   }).catch(function errorCallback(error) {    console.log(error.name+':'+error.message); //返回值：NotAllowedError:Permission denied    console.log(error);       //返回值：DOMException: Permission denied    console.log(typeof error);     //返回值：object   })  }  function takePhoto() {   var video=document.getElementById('videoCase');   var canvas=document.getElementById('canvas');   var paintBrush=canvas.getContext('2d');   paintBrush.drawImage(video,0,0,360,300);  } </script></body>

 









原文转载：http://www.shaoqun.com/a/632769.html

跨境电商：https://www.ikjzd.com/

周宁：https://www.ikjzd.com/w/1647

prime day：https://www.ikjzd.com/w/131.html


1.WebWorker线程　　JavaScript语言是单线程模型，通过WebWorker为JS创造多线程环境；　　由主线程创建Worker线程，将一些任务分配给Worker运行，两者异步执行；　　Worker完成计算任务后，再将结果返回给主线程。　　优点：可以分担计算密集型或高延迟的任务，确保主线程运行会更加流畅；　　缺点：Worker一旦创建成功，为随时响应主线程通信，如不主动关闭结束，　　　
淘粉吧官网：https://www.ikjzd.com/w/1725.html
mav：https://www.ikjzd.com/w/2414
智赢：https://www.ikjzd.com/w/1511
史上最最疯狂的年终亚马逊旺季战役打响，用好广告锦囊，Q4收割一整年KPI！：https://www.ikjzd.com/home/132122
紧急注意：有这些美国客户的外贸人须警惕！最新破产、关店清单！：https://www.ikjzd.com/home/18296
亚马逊广告竞价策略：https://www.ikjzd.com/tl/107866

Comments

Post a Comment

Popular posts from this blog

指纹浏览器定制开发全面助力企业安全与智能升级

在数字化时代，企业信息安全和智能化管理愈发成为商务发展的两大支柱。为适应这一趋势，指纹浏览器定制开发成为了企业安全和智能升级的最佳选择。让我们一同探索，如何通过指纹浏览器的二次开发、私有部署和AI智能等关键功能，助力企业迎接未来的挑战。 指纹浏览器二次开发：保障身份识别的极致体验 随着科技的不断进步，传统身份验证方式显得越来越脆弱。指纹浏览器的二次开发为企业带来了身份识别的极致体验，通过精准的生物特征验证，极大地提高了安全性。企业无需担忧密码泄漏或仿冒风险，真正实现了信息安全的无忧管理。 私有部署：数据安全掌握在自己手中 数据是企业最重要的资产之一，而私有部署则是最为可靠的数据保护手段之一。通过将指纹浏览器定制开发系统私有部署，企业能够完全掌握对敏感数据的访问和存储。这一层级的掌控，不仅提升了数据的安全性，同时也避免了因为云服务的共享带来的潜在风险。 原文转载： https://fashion.shaoqun.com/a/1585172.html 深圳巴厘岛海景酒店 ：https://www.vstour.cn/t/深圳巴厘岛海景酒店.html 深圳巴厘岛旅行团 ：https://www.vstour.cn/t/深圳巴厘岛旅行团.html 深圳巴厘岛旅游 ：https://www.vstour.cn/t/深圳巴厘岛旅游.html 深圳巴厘岛旅游报价 ：https://www.vstour.cn/t/深圳巴厘岛旅游报价.html 深圳巴厘岛旅游价格 ：https://www.vstour.cn/t/深圳巴厘岛旅游价格.html 深圳巴厘岛旅游团 ：https://www.vstour.cn/t/深圳巴厘岛旅游团.html 红海堵塞，海湾受益？ ：https://www.kjdsnews.com/a/1743053.html 一篇文章带你了解商标注册：尼加拉瓜 ：https://www.kjdsnews.com/a/1743054.html
Read more

跨境电商资讯：一文带你走进亚马逊19大海

Image
随着全球电商行业的迅速发展，许多品牌逐渐将目光投向海外市场，寻找新的业务增长点。亚马逊作为全球最大的电商平台之一，拥有众多海外站点，为卖家提供了广阔的发展空间和优质的服务。然而，当卖家们面对海外众多不同的站点，它们的区别是什么？该选红海站点还是蓝海站点？如何才能选择适合自己的平台？这些都让许多卖家感到非常迷惑，不知所措。 别着急！接下来就让小编带大家一起了解亚马逊各大海外站点的机会优势，并分享几位卖家的实战经验，助您选好出海站点，赢在起跑线！ 目前，亚马逊在全球拥有19大海外站点，覆盖北美、拉丁美洲、欧洲、亚洲、大洋洲等多个地区，帮助卖家触达数亿消费者。这些站点各有"特长"，您可以结合自身业务、资金情况和发展需求等因素，Pick适合自己的出海站点，及时把握海外商机！ 01老牌成熟站点，新手出海首选！ 目前，亚马逊在北美地区拥有美国站和加拿大站两大站点。北美站的整体成熟度和服务完善性让许多卖家将它作为开拓生意的首站。 从宏观环境来看，北美站可谓实力超群： ●体量庞大，消费潜力高 作为亚马逊全球最大海外站点，消费实力强劲，两大站点囊括3.7亿+人口，人红利充足，Prime会员占比高； ●品类齐全，细分赛道机会多 加拿大站选品文化接近美国，选品空间广阔，有利于卖家挖掘不同品类商机! 对于新手来说，亚马逊北美站拥有多重优势助力启航： ●配套完善，服务齐全 作为最早开设的站点，亚马逊服务支持齐全，新卖家上手更轻松 ●物流便捷，配送无阻 您可使用亚马逊远程物流配送计划(NARF)，将美国站FBA库存直接配送给加拿大买家，无需将库存事先运送到加拿大，助您轻松拓展北美地区商业版图! 该计划具有以下4大优势： ●利用美国FBA库存，为加拿大的Prime买家提供免费配送服务； ●由亚马逊处理跨境配送事宜，让配送流程更简单便捷； ●进口税费和相关费用由买家支付，无需卖家承担； ●退货直接退回美国，省心省力。 如果您想坐拥巨大流量，触达更多、更广泛的消费者；如果您的选品种类丰富齐全，希望同时布局多种品类赛道……那么北美站是您不该犹豫的首选! 02高潜消费增长能力，业务拓展不二之选！ 在拉丁美洲，除了已对卖家开放的墨西哥站之外，亚马逊巴西站也于2023年12月正式对中国卖家开放，不少北美站卖家已抢先拓展生意版图，吃到了"第一只螃蟹"! 结合宏观发展趋势...
Read more

利用 Google 购物广告促进销量的初学者指南

您需要更多客户。 并且，您需要 以可接受的成本获取它们 。因为，如果你不能做这两件事呢？ ……好吧， 我们别去那里了 。 首先，如何获得更多客户？ 嗯，一种行之有效的方法是 Google Shopping 。 这一领先的电子商务流量来源 占 电子商务 网站整体销售额的 16% 以上。 那是 巨大的。 但是，当您考虑到Google每秒处理超过 40,000 个搜索查询 时，这也就不足为奇了。 不过，这还不是全部…… 2018 年，在美国电子商务领域，Google 购物广告占 零售搜索广告支出的 76.4% ，占所有付费搜索点击次数的 85.3%。 另一方面，文字广告仅吸引了 23.6% 的零售搜索广告支出和 14.7% 的付费搜索点击次数。 由于 Google 努力通过富媒体广告格式提高知名度，投资 Google Shopping 广告系列已成为零售搜索行业的主要趋势。 但是，您能否使用 Google 购物以可接受的成本获取客户，从而为您带来利润？ 一言以蔽之？ 是的 。 OMG Commerce首席执行官 Brett Curry 去年 管理的广告活动平均 广告支出回报率 (ROAS) 为 300-600% 。 您愿意花 1美元获得 3 至 6 美元的销售额吗？ 我愿意打赌你会的。 你是怎么做到的？ 在本文中，您将准确了解 Google 购物是什么、它的工作原理以及如何开始您的第一个广告系列。 好吧，系好安全带 。 Fansgurus是一个社交媒体营销在线平包含了Facebook，Instagram，Twitter，Pinterest，YouTube，Tiktok，telegram，虾皮等等海外社交媒体，并提供增粉、点赞、转发、评论浏览量直播间在线，网站引流等数据服务。快速体验： zllp.myyfrs.ciwi._okgyw?fyuokfj 什么是谷歌购物？ Google 购物广告也称为产品详情广告或 PLA。而且，当用户在 Google 上搜索产品时，它们就会显示。 它们出现 在搜索结果的顶部或页面的右上角： Google 购物广告也可以 在"购物"标签下找到。 这些广告如此有效的 部分原因 是它们位于搜索结果顶部的显着位置。 那么，Google 购物广告包含哪些内容？ 简而言之， 消费者熟悉的5 个关键组件： 产品图片 产品名称 价格 卖家姓...
Read more