HTML5对于像素级处理的能力已经支持得很好，完成可以实现客户端对像素信息的操作。所以为了解决以上问题最近对系统做了一次比较大的升级。即客户端端直接操作DICOM的像素数据进行JS端图像的生成以及JS端实现窗宽窗位的调整。下面说一下HTML5对图像像素点的操作和验证码干扰点实现思路。

<canvas id="canvas" width="800" height="500"></canvas>

<script type="text/javascript">

var canvas = document.getElementById('canvas');

var cv =canvas.getContext('2d');

//接下来画个长方形当做它背景,然后获得画板像素信息(画个背景容易能看到它)

cv.fillStyle = '#272822';

cv.fillRect(0,0,800,500);

//获得图像的所有的像素点的信息

var alldata = cv.getImageData(0,0,800,500);

//alldata.data

//255,22,33,255相当于rgba 前面三个是颜色,后面这个数是透明度

//[255,22,33,255,255,22,33,255]

//循环,将获得的数据的每个值都随机

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

//随机0~255之间的随机整数(下面随机整数公式走起)

//var num = Math.floor(Math.random()*(y+1-x)+x)

//y这里是255,x这里是0

//var num = Math.floor(Math.random()*(255+1-0)+0)

//代码精减一点就是

//var num = Math.floor(Math.random()*(255+1));

//再精减(这样就获得随机整数)

var num = Math.floor(Math.random()*(256));

//然后再把alldata它里面的data这里的[i]号改成随机数

alldata.data[i] = num;

}

//将处理后的数据存储回画板

cv.putImageData(alldata,0,0)

</script>

图片展示：

原文链接：https://www.qiquanji.com/post/7746.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。