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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知