本文转载自微信公众号《我们医科大学前端技术》，作者杨光。转载本文请联系微一大学前端技术公众号。前言在体检图像显示中，窗口调整是一个基本的常用操作：通过滑动鼠标来改变窗口宽度和窗口水平的大小。窗宽（width）和窗位（中心点）其实就是像素值的一个区间。如果所有像素点的像素值都在这个范围内，则显示，不在范围内则不显示。在web版imageviewer（图片展示工具）开发项目中，发现当dr、dx等大图片（图片一般宽高都在2000px左右，每个像素大小为16位or32-bit)调整窗口时，浏览器直接卡顿，图像显示变化有较大延迟。后来查了资料，用gpujs实现了窗口调整时的图像处理。结果：窗口调整后图像显示变化更线性，性能估计提升5/6倍，可以满足业务需求。当然，一些图像的高级处理可以用gpujs实现，窗口调整只是一个点。之前：之后：什么是GPU.js？GPU.js是用于Web和Node.js上的GPGPU（GPU通用计算）的JavaScript加速库。GPU.js自动将简单的JavaScript函数转换为着色器语言并编译它们，以便它们在您的GPU上运行。使用GPU执行大规模并行GPGPU计算，并在GPU不可用时使用优雅的纯JavaScript回退。GPU，全称GraphicsProcessingUnit，是一种图像处理器，早期主要用于显示图像。由于图像处理主要是简单的矩阵运算，很少有逻辑判断，因此GPU的设计与CPU不同。因此，一块GPU上可以有很多计算单元，可以进行大量的并行计算。在网上找了个视频，应该是某年Nvidia的产品发布会，很形象的演示了CPU和GPU的区别。http://v.youku.com/vshow/idXNDcyNTc1MjQ4==.html。知乎上也有CPU和GPU的对比https://www.zhihu.com/question/19903344比如用GPU.js写的矩阵乘法（对2个大小为512x512的矩阵进行矩阵乘法）。一个GPU加速内核，它转换一个计算512x512矩阵（二维数组）的单个元素的javascript函数。内核在GPU上串联运行，通常会导致非常快的计算！您可以在此处运行基准测试。通常，它的运行速度会快1-15倍，具体取决于您的硬件。由于架构设计的不同，GPU非常适合简单的并发计算，在图像处理、深度学习等领域的应用可以大大提速。当然，直接用GPU写程序是有难度的。一般会有专门的编译器将代码编译成可以在GPU上执行的代码。本文所说的gpu.js是将js的一个子集编译成前端可以在webgl上执行的编译器。更多使用场景demo请参考官网https://gpu.rocks/#/examples。使用中遇到的坑。使用npm导入gpu.js包，发现项目无法运行，可能是机器的问题。后来改为直接使用浏览器方式导入js文件。我们使用canvas方法直接输出像素数据。Yes不同尺寸的图片需要使用不同尺寸的画布。使用同一画布时无法清除某些像素。我尝试了其他方法清除它们：它没有用。canvas方法中像素数据的由来是在左下角创建一个kernel，kernel里面的函数或者自定义函数，在打包过程中经过压缩简化后，会出现问题：转换后的一些运算符是gpu.js不支持。因此需要专门设置js压缩转换规则，因为每个设备的gpu特性不同，使用gpujs库时可能会出现未知异常。总之，加上try{}catch(){正常处理cpu}可以解决大部分问题。#在index.html中引入gpu.js#开始使用vargpu=newGPU();gpu.addFunction(function1)#添加自定义函数gpu.addFunction(function12)#添加自定义函数#CreateKernelvarkernel=gpu.createKernel(function(parameter1,parameter2,...){#窗口调整算法###},{graphical:true,output:outputsize})#ExecuteKernelkernel(入参1,入参2,...);varcanvasRender=kernel.canvas;#直接显示canvasRender,....官方使用场景演示地址：https://gpu.rocks/#/examples使用GPU.js闪亮的新v2的示例“CosmicJellyfish”将图像加载到GPU.js的简单示例.BrowserNodeconst{GPU}=require('gpu.js');constgpu=newGPU();constmultiplyMatrix=gpu.createKernel(函数(a,b){letsum=0;for(leti=0;i<512;i++){sum+=a[this.thread.y][i]*b[i][this.thread.x];}returnsum;}).setOutput([512,512]);constc=multiplyMatrix(a,b);示例在本示例中，两个512x512矩阵（二维数组）的乘法计算是在GPU上并行完成的。1.生成矩阵constgenerateMatrices=()=>{constmatrices=[[],[]]for(lety=0;y<512;y++){matrices[0].push([])matrices[1].push([])for(letx=0;x<512;x++){矩阵[0][y].push(Math.random())矩阵[1][y].push(Math.random())}}returnmatrices}2.创建“内核”constgpu=newGPU();constmultiplyMatrix=gpu.createKernel(function(a,b){letsum=0;for(leti=0;i<512;i++){sum+=a[this.thread.y][i]*b[i][this.thread.x];}returnsum;}).setOutput([512,512])3.调用内核constmatrices=generateMatrices()constout=multiplyMatrix(matrices[0],matrices[1])4.输出矩阵console.log(out[y][x])//记录矩阵第x行第y列的元素console.log(out[10][12])//记录矩阵第10行第12列的元素输出矩阵总结gpu.js将前端js的一个子集编译成可以在webgl上执行的编译器，简单、实用、速度快，所以高性能耗时可以考虑使用gpu.js操作。参考官网??https://gpu.rocks/#/githubhttps://github.com/gpujs/gpu.js更多例子https://gpu.rocks/#/examples杨光：微医前端-终端技术部工程师。立志成为全栈开发工程师甚至架构师，路漫漫其修远兮，我在找。生活中通过健身释放压力，思考问题。
