美文网首页
七章-81-图像滤镜

七章-81-图像滤镜

作者: 彩云飘过 | 来源:发表于2020-03-27 17:55 被阅读0次

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers 5.3.x api。

源码 见 1081.html ,对应的 官网示例

image.png

核心技术点:
layer.on('postcompose', function(event) {})
绑定了layer的'postcompose'事件,并在渲染后进行图像的处理

image.png
<!DOCTYPE html>
<html>

<head>
 <title>图像滤镜</title>
 <link rel="stylesheet" href="../include/ol.css" type="text/css" />
 <script src="../include/ol.js"></script>
</head>
<style></style>

<body>
 <select id="kernel" name="kernel">
   <option>none</option>
   <option selected>sharpen锐化</option>
   <option value="sharpenless">sharpen less轻度锐化</option>
   <option>blur模糊</option>
   <option>shadow阴影</option>
   <option>emboss浮雕</option>
   <option value="edge">edge detect边缘查找</option>
 </select>
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>
 <script>
   var key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';

   var imagery = new ol.layer.Tile({
     source: new ol.source.OSM()
   });

   var map = new ol.Map({
     layers: [imagery],
     target: 'map',
     view: new ol.View({
       center: ol.proj.fromLonLat([-120, 50]),
       zoom: 6
     })
   });

   var kernels = {
     none: [
       0, 0, 0,
       0, 1, 0,
       0, 0, 0
     ],
     sharpen: [
       0, -1, 0,
       -1, 5, -1,
       0, -1, 0
     ],
     sharpenless: [
       0, -1, 0,
       -1, 10, -1,
       0, -1, 0
     ],
     blur: [
       1, 1, 1,
       1, 1, 1,
       1, 1, 1
     ],
     shadow: [
       1, 2, 1,
       0, 1, 0,
       -1, -2, -1
     ],
     emboss: [
       -2, 1, 0,
       -1, 1, 1,
       0, 1, 2
     ],
     edge: [
       0, 1, 0,
       1, -4, 1,
       0, 1, 0
     ]
   };

   // 图像处理的方法,归一化
   function normalize(kernel) {
     var len = kernel.length;
     var normal = new Array(len);
     var i, sum = 0;
     for (i = 0; i < len; ++i) {
       sum += kernel[i];
     }
     if (sum <= 0) {
       normal.normalized = false;
       sum = 1;
     } else {
       normal.normalized = true;
     }
     for (i = 0; i < len; ++i) {
       normal[i] = kernel[i] / sum;
     }
     return normal;
   }

   var select = document.getElementById('kernel');
   var selectedKernel = normalize(kernels[select.value]);



   // map 和layers 都可以触发postcompose
   /**
    * 更新kernel并且在选项更改时重新归一化.
    */
   select.onchange = function () {
     selectedKernel = normalize(kernels[select.value]);
     map.render();//归一化之后,重新渲染地图
   };


   /**
    *在"postcompose" 触发之后应用滤镜.
    */
   imagery.on('postcompose', function (event) {
     convolve(event.context, selectedKernel);//卷积操作,应用滤镜效果
   });


   /**
    * Apply a convolution kernel to canvas.  This works for any size kernel, but
    * performance starts degrading above 3 x 3.
    * @param {CanvasRenderingContext2D} context Canvas 2d context.
    * @param {Array<number>} kernel Kernel.
    * 此处是卷积操作
    */
   function convolve(context, kernel) {
     var canvas = context.canvas;
     var width = canvas.width;
     var height = canvas.height;

     var size = Math.sqrt(kernel.length);
     var half = Math.floor(size / 2);

     var inputData = context.getImageData(0, 0, width, height).data;

     var output = context.createImageData(width, height);
     var outputData = output.data;

     for (var pixelY = 0; pixelY < height; ++pixelY) {
       var pixelsAbove = pixelY * width;
       for (var pixelX = 0; pixelX < width; ++pixelX) {
         var r = 0, g = 0, b = 0, a = 0;
         for (var kernelY = 0; kernelY < size; ++kernelY) {
           for (var kernelX = 0; kernelX < size; ++kernelX) {
             var weight = kernel[kernelY * size + kernelX];
             var neighborY = Math.min(
               height - 1, Math.max(0, pixelY + kernelY - half));
             var neighborX = Math.min(
               width - 1, Math.max(0, pixelX + kernelX - half));
             var inputIndex = (neighborY * width + neighborX) * 4;
             r += inputData[inputIndex] * weight;
             g += inputData[inputIndex + 1] * weight;
             b += inputData[inputIndex + 2] * weight;
             a += inputData[inputIndex + 3] * weight;
           }
         }
         var outputIndex = (pixelsAbove + pixelX) * 4;
         outputData[outputIndex] = r;
         outputData[outputIndex + 1] = g;
         outputData[outputIndex + 2] = b;
         outputData[outputIndex + 3] = kernel.normalized ? a : 255;
       }
     }
     context.putImageData(output, 0, 0);
   }

 </script>
</body>

</html>

相关文章

  • 七章-81-图像滤镜

    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers 5...

  • Core Image专题(二)

    处理图像 处理图像意味着应用滤镜 - 图像滤镜是逐像素检查输入图像,在算法上应用某种效果以创建输出图像。 在Cor...

  • 图像滤镜

    canvas+vue 共10个滤镜(好像马赛克写大图没有实现) 源码地址:https://github.com...

  • 使用OPenGL ES 实现滤镜功能

    滤镜 滤镜就是通过特定的算法编辑图像,使图像呈现不同的效果.其实滤镜的关键在片元着色器其实滤镜处理的原理:就是把静...

  • Core Image编程指南翻译二(图像处理)

    示例代码下载 图像处理 图像处理意味着应用滤镜 - 图像滤镜是一个软件,它逐个像素地检查输入图像,并在算法上应用一...

  • 07. PS2019CC官方教程七 —— 冷色和暖色

    1. 冷色和暖色图像 使用照片滤镜调整过暖或过冷的图像。 2. 添加照片滤镜 在主菜单中,转到图像> 调整> 照片...

  • 小星球效果

    1.更改图片为正方形:图像——图像大小 2.直接添加极坐标滤镜效果 3.或图像旋转180度后执行滤镜等效果 再次执...

  • 滤镜

    滤镜:可以用来给图像添加效果。功能很强大,使用滤镜很容易对图像、视频帧进行模糊、色彩、像素等处理 介绍 1、框架:...

  • canvas 图像滤镜

    这期完成了图像的一些简单的滤镜,问题就在于,关于rgb颜色之间的一些转换。第二期完成视频的人脸识别附上代码gif过...

  • 强大的CSS:滤镜和混合模式处理的图片如何上传下载?

    一、使用CSS滤镜和混合模式在线PS 使用CSS滤镜和混合模式可以实现各种各样的图像处理效果,内置众多图像处理效果...

网友评论

      本文标题:七章-81-图像滤镜

      本文链接:https://www.haomeiwen.com/subject/amvluhtx.html