重要代码清单
为比较带WebWorker及不带WebWorker的脚本表现，我们尝试在两种环境下调用程序。首先我们将包含线程的外部JavaScript文件(canvasjprofile.js)放到页面的开头以便首先加载，这样omnessage函数才能成为一个全局变量——而非仅在线程代码里生效。下面让我们开始编写HTML代码：
CalculateelevationprofileswithWebWorkers
Numberofprofiles
Numberofsectionsinprofile
Start
orWebWorkers
类型为number的两个输入区域中的内容一旦作出改变，将导致函数updateProgressBarsO被调用，并在该函数中创建出进度条及输出结果的占位符。海拔文件的计算通过两个按钮with及without开始。
在JavaScript代码中，宁波网站建设认为为了从PNG图像中提取出海拔值，我们需要将图像载人一个新的canvas元素：
varcanvas=document.createElement(MCANVAS");canvas.width=;canvas.height=；
varcontext=canvas.getContext('2d')j
varimage=document.querySelector("IMG");context.drawlmage(image,);//document.querySelector(wB0DYw).appendChild(canvas);varelev=context.getImageData(0,0,canvas.width,canvas.height).data;varalpha=[];for(vari=0;i 网页里唯一的img元素被载入为变量image,并被绘制在新创建的canvas元素中。鉴于该img元素被标记为display:none，而canvas从依附于DOM树，所以无论是图片还是画布在网页上都不可见。不过若在此前代码中激活注释行，就可以在页面底部看见画布。getImageData()函数会生成包含canvas颜色及alpha通道值的数组(都是每像素包含4个元素)。因为alpha通道值会被用到，所以我们通过foi循环将它从数组中取出来。压缩数据量无疑是明智的选择，因为每个线程都会收到一份数组的拷贝。若我们并行开始4个线程，每个线程的内存占用率将直线上升。
之后，根据传递至函数calcProfilesO的值为true或false来决定是否用多线程开展计算：
calcProfiles=function(useWorker){
USEWORKER=useWorker;startTime=newDate();for(vari=0;i 变量PROFILES包含了相关input字段的值，并控制核心foi循环的运行频率。变量imgData根据图像海拔值(alpha)、环节数(PARTS)、画布髙度(height)与宽度(width)、外加一个ID(id)创建。这些创建要素将在稍后被档案引用。其后程序逻辑将自己分为使用WebWorker和不使用WebWorker的两部分：
if(USE_WORKER){
imgData.useWorker=true;
varworker=newWorker('canvas_profile.js');worker.postMessage(imgData);一worker.onmessage=function(evt){if(evt.data.task=='update'){progress.item(evt.data.id).value=evt.data.status*i;}elseif(evt.data.task=='newMin'){JCprogDivMin'+evt.data.idJ.innerHTML=evt.data.min;}elseit(evt.data.task=='newMax'){JCprogDivMax'+evt.data.idJ.innerHTML=evt.data.max;}else{showResults(evt);
imgData.useWorker=false;showResultsf
onmessage({data:imgData})
)；
progress.item(i).value=PARTS;
第一种情况创建了一个新线程并通过postMessageO将其激活，然后将变量imgData的整个数据结构传递给它。由此定义出的时间监听器接收四种不同类型的信息。update类型的信息用来更新进度条，newMin及newMax用来重设网站上的相关海拔值。其他类型的信息会调用showResultO函数，算出总的运算时间与坐标点数量并显示在海拔档案上。
若不使用多线程，则将调用外部JavaScript文件中的onmessage()函数，并将变量imgData包裹成JavaScript对象的数据属性。这是一种非常实用的方法，因为线程中的postMessageO函数同样会将数据包裹成这样的结构，我们就不需要多余的代码了。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
