<!DOCTYPE html>
<head>
<title>WebGL学习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<style id="全局样式">
body {
/* background-color: #DDDDDD; */
margin: 0px;
/* white-space: nowrap; */
}
div#按钮列 {
top: 50px;
left: 5px;
position: fixed;
}
svg#线条 {
top: 0px;
left: 0px;
position: absolute;
}
div#即时信息 {
background-color: rgba(180, 180, 180, 0.8);
}
canvas#画布 {
/* box-sizing:border-box; */
border-width: 0px;
border-color: rgb(80, 80, 80);
border-style: solid;
/* border-radius: 50%; */
background-color: rgba(180, 180, 180, 0.8);
/* opacity:0.8; */
position: absolute;
/* left: 0px; */
/* top: 0px; */
width: 100%;
height: 100%;
/* z-index: 4; */
}
canvas#显示画布 {
box-sizing: border-box;
border-width: 0px;
border-color: rgb(80, 80, 80);
border-style: solid;
top: 1000px;
left: 0px;
position: absolute;
}
</style>
</head>
<body>
<!-- img src="图像处理/跳一跳.png" -->
<div id="绘图容器">
<canvas id="画布"></canvas>
<svg id="线条" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line id="线段1" x1="0" y1="0" x2="300" y2="300" style="stroke:rgba(255,255,255,255);stroke-width:1" />
</svg>
</div>
<div id="按钮列">
<button id="运行" type="button">运行</button>
<button id="生成" type="button">绘制</button>
<button id="启停" type="button">启动</button>
<button id="保存" type="button">保存图像</button>
<div id="即时信息"></div>
<div id="状态"></div>
</div>
<canvas id="显示画布"></canvas>
<script src="stats.min.js"></script>
<script src="WebGL学习.js"></script>
<script>
var 纹理创建数 = 0;
var 纹理销毁数 = 0;
var 帧缓冲创建数 = 0;
var 帧缓冲销毁数 = 0;
var 信息, 结果图像;
var 弧度到度 = 180 / Math.PI;
var 上下文 = 画布.getContext('2d');
var img = new Image(), 待处理画布 = document.createElement('canvas');
var 待处理上下文 = 待处理画布.getContext('2d');
img.src = '图像处理/线条1.png'; //跳一跳.png Mapleleaf_ZH-CN9491310356_1920x1080[1].jpg untitled.png Lena原图.png 1520822497288.jpg
//OlomoucClock_ZH-CN14494749598_1920x1080.jpg 线条.png 1085343-20170424223432225-596215935.png 细线1像素.png 多极测试.jpg
stats = new Stats();
状态.appendChild(stats.dom);
var a = 0, start = window.performance.now();
var 循环 = false;
function 动画() {
if (!循环) return;
a++;
if (a >= 100) {
a = 0;
即时信息.innerHTML = (window.performance.now() - start) / 100;
start = window.performance.now();
}
图像处理.处理(待处理画布);
stats.update();
on生成();
window.requestAnimationFrame(动画);
}
function 浮点数据到图像(数据, 宽, 高) {
let 图像 = new Uint8ClampedArray(宽 * 高 * 4);
let 长度 = 数据.length / 4;
for (let i = 0; i < 长度; i++) {
let l = i * 4;
图像[l] = 数据[l] * 255;
l++;
if (数据[l] < 0)
图像[l] = (数据[l] + Math.PI) / (Math.PI) * 255
else
图像[l] = (数据[l]) / (Math.PI) * 255;
l++;
图像[l] = 数据[l]*1.5 * 255;
l++;
图像[l] = 255;
}
return new ImageData(图像, 宽, 高);
}
function 霍夫查找图像数据(数据, 宽, 高) {
let 长度 = 数据.length / 4;
let 对角 = Math.sqrt(高*高+宽*宽);
let 截距 = new Array(Math.ceil(对角*2));
const 分度数 = 90;
const 分度 = 分度数/Math.PI;
for (let i = 0; i < 长度; i++) {
let l = i * 4;
if (数据[l]){
let 索引=Math.floor((数据[l+2]+1)*对角);
let 角度计数 = 截距[索引];
if (!角度计数){
角度计数 = new Int32Array(分度数);
截距[索引]=角度计数;
}
角度计数[Math.floor(数据[l+1]*分度)]+=1;
}
}
let 结果=[];
const 阈值=100;
for (let i = 0,li=截距.length; i < li; i++) {
let 角度计数 = 截距[i];
if (角度计数)
for (let j = 0,lj=角度计数.length; j < lj; j++) {
if (角度计数[j]>=阈值){
结果.push([j/分度,i-对角]);
}
}
}
return 结果;
}
运行.addEventListener('click', function (ev) {
let w = img.width, h = img.height;
if (w < h) {
if (h > 2046) {
待处理画布.height = 2046;
待处理画布.width = 2046 / h * w;
}
else {
待处理画布.width = w;
待处理画布.height = h;
}
}
else {
if (w > 2046) {
待处理画布.height = 2046 / w * h;
待处理画布.width = 2046;
}
else {
待处理画布.width = w;
待处理画布.height = h;
}
}
待处理上下文.drawImage(img, 0, 0, w, h, 0, 0, 待处理画布.width, 待处理画布.height);
图像处理.运行(待处理画布, (获取图像) => {
setTimeout(() => {
let start = window.performance.now();
let 结果 = 获取图像('', true, false);
console.log(霍夫查找图像数据(结果, 待处理画布.width, 待处理画布.height));
结果 = 浮点数据到图像(结果, 待处理画布.width, 待处理画布.height);
if (结果 instanceof ImageData) {
画布.width = 结果.width;
画布.height = 结果.height;
画布.style.width = 结果.width + 'px';
画布.style.height = 结果.height + 'px';
线条.width.baseVal.value = 结果.width;
线条.height.baseVal.value = 结果.height;
线条.style.width = 结果.width + 'px';
线条.style.height = 结果.height + 'px';
let start = window.performance.now();
//结果=图像处理.高斯模糊(结果,10);
console.log(window.performance.now() - start, '结果=图像处理.高斯模糊(结果,2);');
上下文.putImageData(结果, 0, 0);
}
else {
console.log('图像处理没能返回结果。');
}
信息 = 获取图像('第三块', true, false);
if (信息 instanceof Float32Array) {
console.log('第三块x:' + 信息[0]);
console.log('第三块y:' + 信息[1]);
console.log('第三块z:' + 信息[2]);
console.log('第三块w:' + 信息[3]);
}
else {
console.log('图像处理没能返回结果。');
}
console.log(window.performance.now() - start, '图像处理.运行;');
}, 0);
});
console.log('纹理创建数:', 纹理创建数);
console.log('纹理销毁数:', 纹理销毁数);
console.log('帧缓冲创建数:', 帧缓冲创建数);
console.log('帧缓冲销毁数:', 帧缓冲销毁数);
});
生成.addEventListener('click', on生成, false);
function on生成(ev) {
let start = window.performance.now();
图像处理.绘制((获取图像) => {
//let 结果图像 = 获取图像('第三块', true, true);//第三块
let 图像 = new Uint8ClampedArray(待处理画布.width * 待处理画布.height * 4);
let 长度 = 信息.length / 4;
for (let i = 0; i < 长度; i++) {
let l = i * 4;
/*
图像[ l ] = (信息[ l ]+Math.PI)/(2*Math.PI) * 255;
l++;
图像[ l ] = (信息[ l ]+Math.PI)/(2*Math.PI) * 255;
l++;
图像[ l ] = (信息[ l ]+Math.PI)/(2*Math.PI) * 255;
*/
if (信息[l] < 0)
图像[l] = (信息[l] + Math.PI) / (Math.PI) * 255
else
图像[l] = (信息[l]) / (Math.PI) * 255;
l++;
if (信息[l] < 0)
图像[l] = (信息[l] + Math.PI) / (Math.PI) * 255
else
图像[l] = (信息[l]) / (Math.PI) * 255;
l++;
if (信息[l] < 0)
图像[l] = (信息[l] + Math.PI) / (Math.PI) * 255
else
图像[l] = (信息[l]) / (Math.PI) * 255;
l++;
图像[l] = 255;
}
let 结果 = 获取图像('', true, false);
上下文.drawImage(显示画布, 0, 0);
//let 结果 = new
基于WebGL的图像处理学习 .zip
需积分: 5 80 浏览量
2024-02-10
10:33:00
上传
评论
收藏 13.24MB ZIP 举报
基于WebGL的图像处理学习。.zip （50个子文件） 
资料总结 
WebGL学习 - 副本20180228.js 60KB WebGL学习--.js 13KB .vscode launch.json 497B 图像处理 
跳一跳.png 317KB
DCCB_ZH-CN12497477745_1920x1080.jpg 330KB 线条.png 199KB Mapleleaf_ZH-CN9491310356_1920x1080[1].jpg 117KB 跳一跳1024.png 481KB JohnstonCanyon_ZH-CN13093779174_1920x1080.jpg 340KB 线条1.png 120KB 跳一跳hb.png 181KB Sanderlings_ZH-CN9697685009_1920x1080.jpg 261KB PulauWayagIslands_ZH-CN11954777980_1920x1080.jpg 338KB 1520822497288.jpg 1.39MB 细线1像素.png 6KB OlomoucClock_ZH-CN14494749598_1920x1080.jpg 306KB 1085343-20170424223432225-596215935.png 24KB untitled.png 134KB three83.js 1011KB IMG_20180311_110239.jpg 3.43MB Lena原图.png 161KB
Webgl图片处理研究.html 4KB 图像卷积算子模板 
Roberts算子模板.gif 2KB 拉普拉斯算子模板.jpg 27KB Kirsch算子模板，选出最大值.gif 9KB 拉普拉斯算子.jpg 3KB 拉普拉斯算子离散形式.jpg 6KB 拉普拉斯算子锐化.jpg 11KB Robinson算子模板，选出最大值.gif 8KB Prewitt算子模板.gif 2KB Sobel算子模板.gif 2KB 2018-03-09.png 1.29MB 多极测试.jpg 1.49MB 线条2.png 2MB WebGL学习 - 副本2018-3-2.js 68KB WebGL学习.js 110KB stats.min.js 2KB WebGL学习 - 副本20180224.js 53KB WebGL学习.html.bak 1KB webgl-demo.js 13KB cubetexture.png 93KB WebGL学习.js.bak 44KB
梯度方向.xlsx 12KB gl-matrix.js 170KB .gitignore .gitignore 17B WebGL学习 - 副本2018-3-8.html 3KB WebGL学习 - 副本20180224-1.js 56KB WebGL学习 - 副本2018-3-8.js 87KB WebGL学习.html 10KB WebGL学习 - 副本.js 55KB资源评论
妄北y
- 粉丝: 1w+
- 资源: 1万+
最新资源
- chromedriver-linux64.zip 是一个用于在 Linux 系统上运行 Chrome 浏览器的驱动程序
- 基于Python和PyTorch框架完成的一个手写数字识别实验源码(带MINIST手写数字数据集)+详细注释(高分项目)
- 基于Matlab在MNIST数据集上利用CNN完成手写体数字识别任务，并实现单层CNN反向传播算法+源代码+文档说明(高分项目)
- NVIDIA驱动、CUDA和Pytorch及其依赖
- html动态爱心代码一（附源码）
- c40539bc-071a-486c-9d52-9d0c18d62dac 4.html
- 基于物理的非视域成像（NLOS）算法，利用了nerf+python源码+文档说明
- yuluer知更鸟.7z(1).001
- python课程设计-基于tensorflow实现的图文生成程序，数据集flickr30k-images+源代码+文档说明+截图
- python作业-基于Flickr30k数据集实现图像文本跨模态搜索python源码+数据集+测试界面+项目说明(高分课程设计)
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
