四十七、openlayers官网示例Image Filters——给地图添加锐化、浮雕、边缘等滤镜效果

news2024/10/7 8:25:00

 官网demo示例：

Image Filters

这篇讲的是如何给地图添加滤镜。

一看代码，，好家伙，信息量满满，全都看不懂。。。

咱只能一段一段扒。。。

首先添加一个底图到地图上，这个好理解。

    const imagery = new TileLayer({
      source: new OGCMapTile({
        url: "https://maps.gnosis.earth/ogcapi/collections/NaturalEarth:raster:HYP_HR_SR_OB_DR/map/tiles/WebMercatorQuad",
        crossOrigin: "",
      }),
    });
    const map = new Map({
      layers: [imagery],
      target: "map",
      view: new View({
        center: fromLonLat([-120, 50]),
        zoom: 6,
      }),
    });

 新建一个对象定义了一组卷积核。

    const 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], //增强图像的边缘和细节，但比 sharpen 更强烈。
      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], //边缘检测滤波器
    };

 等等，啥叫卷积核？

卷积操作是一种通过一个卷积核矩阵（kernel）来滤波图像的技术，它可以实现各种图像效果，比如锐化、模糊、阴影、浮雕和边缘检测等。

 

 啥叫卷积核矩阵？

卷积核是一个 3x3 的矩阵，每个元素代表像素在滤波时的权重。卷积操作通过将这个卷积核在图像上滑动，将核矩阵与图像中的每个 3x3 区域逐个相乘，然后求和，生成新的像素值。

例如，对于 sharpen 卷积核：

0  -1  0
-1  5 -1
 0 -1  0

这个卷积核在图像上滑动时，会增强中心像素值（乘以 5）并减弱周围像素值（乘以 -1）。通过这种方式，不同的卷积核可以实现各种图像处理效果，如锐化、模糊、浮雕等。 

卷积核进行归一化处理函数：

function normalize(kernel) {
      // 获取卷积核的长度
      const len = kernel.length;
      // 创建一个与卷积核相同长度的新数组
      const normal = new Array(len);
      let i,
        sum = 0;
      // 计算卷积核中所有元素的总和
      for (i = 0; i < len; ++i) {
        sum += kernel[i];
      }
      // 如果总和小于等于0，设置sum为1并标记为未归一化
      if (sum <= 0) {
        normal.normalized = false;
        sum = 1;
      } else {
        // 如果总和大于0，标记为已归一化
        normal.normalized = true;
      }
      // 将卷积核中的每个元素除以总和，得到归一化后的值
      for (i = 0; i < len; ++i) {
        normal[i] = kernel[i] / sum;
      }
      // 返回归一化后的卷积核
      return normal;
    }

将卷积核中的每个元素除以总和 sum，以确保所有元素的总和为1。这样可以保证在卷积操作过程中，图像的整体亮度不会改变 。

看到这，你是不是也跟我一样还有点懵，没事，咱们记住这句话就行：

 卷积核是一个 3x3 的矩阵，每个元素代表像素在滤波时的权重。卷积操作通过将这个卷积核在图像上滑动，将核矩阵与图像中的每个 3x3 区域逐个相乘，然后求和，生成新的像素值。

也就是说，我们得获取图像中的像素数据，然后通过卷积核一类的计算操作，将图像的存储数据进行修改，生成一个新图像，最终实现滤镜效果。

那么问题来了，图像的数据是怎么存储的呢？

function convolve(context, kernel) {
      const canvas = context.canvas;
      const width = canvas.width;
      const height = canvas.height;

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

      // 创建一个新的 ImageData 对象用于输出图像数据
      const output = context.createImageData(width, height);
      const outputData = output.data;
    }

使用 context.getImageData(0, 0, width, height).data来获取图像上的数据，打印一下，看到以下数组：

 对于一个图像来说，inputData 中的数据是按像素顺序存储的，每个像素占用 4 个连续的数组元素，分别表示该像素的红、绿、蓝和透明度（Alpha）值。具体结构如下：

[ R, G, B, A, R, G, B, A, R, G, B, A, ... ]

假设我们有一个 2x2 像素的图像，其像素颜色如下：

  • (0, 0): 红色 (255, 0, 0, 255)
  • (1, 0): 绿色 (0, 255, 0, 255)
  • (0, 1): 蓝色 (0, 0, 255, 255)
  • (1, 1): 白色 (255, 255, 255, 255)

inputData 将会是：

[ 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 255, 255, 255, 255 ]

每四个一组，刚好存储了四个像素点的值。 

这里有个小细节，我们在css中写颜色时透明度的取值是0-100，但实际上，计算机存储的时候范围是0-255，所以这里的透明度的取值是0-255。 

知道了图像结构，我们可以在数组中获取单个像素的值。

假设我们有一个宽度为 width 的图像，要访问坐标 (x, y) 处的像素，可以通过以下方式计算索引： 

const index = (y * width + x) * 4;
const red = inputData[index];
const green = inputData[index + 1];
const blue = inputData[index + 2];
const alpha = inputData[index + 3];

 假设图像宽度为 2，要访问坐标 (1, 0) 处的像素（绿色）的颜色值：

const width = 2;
const x = 1;
const y = 0;
const index = (y * width + x) * 4;
const red = inputData[index];         // 0
const green = inputData[index + 1];   // 255
const blue = inputData[index + 2];    // 0
const alpha = inputData[index + 3];   // 255

了解了图像基本的存储规律，接下来我们来看具体计算函数 convolve

function convolve(context, kernel) {
      const canvas = context.canvas;
      const width = canvas.width;
      const height = canvas.height;

      // 假设 kernel 是一个归一化的卷积核矩阵，其大小为 size x size
      const size = Math.sqrt(kernel.length);
      const half = Math.floor(size / 2);
      // 获取输入图像数据
      const inputData = context.getImageData(0, 0, width, height).data;
      // 创建一个新的 ImageData 对象用于输出图像数据
      const output = context.createImageData(width, height);
      const outputData = output.data;
      // 遍历每个像素
      for (let pixelY = 0; pixelY < height; ++pixelY) {
        const pixelsAbove = pixelY * width;
        for (let pixelX = 0; pixelX < width; ++pixelX) {
          let r = 0,
            g = 0,
            b = 0,
            a = 0;
          // 遍历卷积核
          for (let kernelY = 0; kernelY < size; ++kernelY) {
            for (let kernelX = 0; kernelX < size; ++kernelX) {
              let weight = kernel[kernelY * size + kernelX];
              const neighborY = Math.min(
                height - 1,
                Math.max(0, pixelY + kernelY - half)
              );
              const neighborX = Math.min(
                width - 1,
                Math.max(0, pixelX + kernelX - half)
              );
              const inputIndex = (neighborY * width + neighborX) * 4;

              // 累加加权后的像素值
              r += inputData[inputIndex] * weight;
              g += inputData[inputIndex + 1] * weight;
              b += inputData[inputIndex + 2] * weight;
              a += inputData[inputIndex + 3] * weight;
            }
          }
          const outputIndex = (pixelsAbove + pixelX) * 4;
          outputData[outputIndex] = r;
          outputData[outputIndex + 1] = g;
          outputData[outputIndex + 2] = b;
          outputData[outputIndex + 3] = kernel.normalized ? a : 255; // 如果卷积核是归一化的，则使用计算后的 alpha，否则设为 255
        }
      }
      // 将输出图像数据放回到画布上下文中
      context.putImageData(output, 0, 0);
    }

 代码很多，但主要是两个循环，一个是循环所有像素点，将每个像素点进行更改。一个是循环卷积核，拿到权重生成累加权重之后的rgb值

其中   let weight = kernel[kernelY * size + kernelX]; 就是获取卷积核的权重值

假设我们有一个 3x3 的卷积核，并希望获取其中元素的位置：

const kernel = [
  0, -1, 0,
  -1, 5, -1,
  0, -1, 0
];

const size = 3; // 卷积核的边长

// 假设我们要获取位置 (1, 1) 的权重值
const kernelX = 1;
const kernelY = 1;

const index = kernelY * size + kernelX; // 计算一维索引
const weight = kernel[index]; // 获取权重值

console.log(weight); // 输出：5

当进行卷积操作时，卷积核需要对每个像素及其周围的像素进行处理。在图像边缘处，卷积核会超出图像的边界，因此需要处理这些边界情况。neighborY 计算了在 pixelY 位置应用卷积核时相应的邻近像素的 y 坐标。 

const neighborY = Math.min(
      height - 1,
      Math.max(0, pixelY + kernelY - half)
);
const neighborX = Math.min(
      width - 1,
      Math.max(0, pixelX + kernelX - half)
);

 现实需求中，我们往往会碰到类似这种设计稿，地图上的地貌纹理相对突出，这时候，我们就可以加上滤镜效果来实现。

完整代码：

<template>
  <div class="box">
    <h1>Image Filters</h1>
    <div id="map" class="map"></div>
    <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>
</template>

<script>
import Map from "ol/Map.js";
import View from "ol/View.js";
import XYZ from "ol/source/XYZ.js";
import { fromLonLat } from "ol/proj.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { OGCMapTile, Vector as VectorSource } from "ol/source.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      map: null,
      extentData: "",
      message: {
        name: "",
        color: "",
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    const imagery = new TileLayer({
      source: new OGCMapTile({
        url: "https://maps.gnosis.earth/ogcapi/collections/NaturalEarth:raster:HYP_HR_SR_OB_DR/map/tiles/WebMercatorQuad",
        crossOrigin: "",
      }),
    });
    const map = new Map({
      layers: [imagery],
      target: "map",
      view: new View({
        center: fromLonLat([-120, 50]),
        zoom: 6,
      }),
    });
    //卷积核
    const 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], //增强图像的边缘和细节，但比 sharpen 更强烈。
      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) {
      // 获取卷积核的长度
      const len = kernel.length;
      // 创建一个与卷积核相同长度的新数组
      const normal = new Array(len);
      let i,
        sum = 0;
      // 计算卷积核中所有元素的总和
      for (i = 0; i < len; ++i) {
        sum += kernel[i];
      }
      // 如果总和小于等于0，设置sum为1并标记为未归一化
      if (sum <= 0) {
        normal.normalized = false;
        sum = 1;
      } else {
        // 如果总和大于0，标记为已归一化
        normal.normalized = true;
      }
      // 将卷积核中的每个元素除以总和，得到归一化后的值
      for (i = 0; i < len; ++i) {
        normal[i] = kernel[i] / sum;
      }
      // 返回归一化后的卷积核
      return normal;
    }

    const select = document.getElementById("kernel");
    let selectedKernel = normalize(kernels[select.value]);

    select.onchange = function () {
      selectedKernel = normalize(kernels[select.value]);
      console.log("selectedKernel", selectedKernel);
      map.render();
    };

    imagery.on("postrender", function (event) {
      convolve(event.context, selectedKernel);
    });

    function convolve(context, kernel) {
      const canvas = context.canvas;
      const width = canvas.width;
      const height = canvas.height;

      // 假设 kernel 是一个归一化的卷积核矩阵，其大小为 size x size
      const size = Math.sqrt(kernel.length);
      const half = Math.floor(size / 2);
      // 获取输入图像数据
      const inputData = context.getImageData(0, 0, width, height).data;
      // 创建一个新的 ImageData 对象用于输出图像数据
      const output = context.createImageData(width, height);
      const outputData = output.data;
      // 遍历每个像素
      for (let pixelY = 0; pixelY < height; ++pixelY) {
        const pixelsAbove = pixelY * width;
        for (let pixelX = 0; pixelX < width; ++pixelX) {
          let r = 0,
            g = 0,
            b = 0,
            a = 0;
          // 遍历卷积核
          for (let kernelY = 0; kernelY < size; ++kernelY) {
            for (let kernelX = 0; kernelX < size; ++kernelX) {
              let weight = kernel[kernelY * size + kernelX];
              const neighborY = Math.min(
                height - 1,
                Math.max(0, pixelY + kernelY - half)
              );
              const neighborX = Math.min(
                width - 1,
                Math.max(0, pixelX + kernelX - half)
              );
              const inputIndex = (neighborY * width + neighborX) * 4;

              // 累加加权后的像素值
              r += inputData[inputIndex] * weight;
              g += inputData[inputIndex + 1] * weight;
              b += inputData[inputIndex + 2] * weight;
              a += inputData[inputIndex + 3] * weight;
            }
          }
          const outputIndex = (pixelsAbove + pixelX) * 4;
          outputData[outputIndex] = r;
          outputData[outputIndex + 1] = g;
          outputData[outputIndex + 2] = b;
          outputData[outputIndex + 3] = kernel.normalized ? a : 255; // 如果卷积核是归一化的，则使用计算后的 alpha，否则设为 255
        }
      }
      // 将输出图像数据放回到画布上下文中
      context.putImageData(output, 0, 0);
    }
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
}
.box {
  height: 100%;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1836404.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

开源表单流程设计器：做好流程化办公 实现提质增效！

开源表单流程设计器：做好流程化办公 实现提质增效！

在社会竞争激烈的今天&#xff0c;如何通过各种渠道和方式实现提质增效&#xff1f;低代码技术平台、开源表单流程设计器的出现&#xff0c;正是助力企业实现流程化办公&#xff0c;进入数字化转型的得力助手。想要利用好企业内部数据资源&#xff0c;打破信息化孤岛&#xff0…
阅读更多...
5个好用的AI绘画软件推荐，小白也能轻松上手

5个好用的AI绘画软件推荐，小白也能轻松上手

前言 随着人工智能技术的飞速发展&#xff0c;AI绘画软件已经成为艺术创作领域的新宠。这些软件不仅能够提供强大的绘画辅助功能&#xff0c;而且操作简便&#xff0c;即使是绘画新手也能轻松上手。本文将为您推荐5款好用的AI绘画软件&#xff0c;帮助您开启艺术创作的大门。 …
阅读更多...
react-2 jsx的学习

react-2 jsx的学习

1.什么是JSX&#xff1f; 概念&#xff1a;JSX就是Javascript和XML&#xff08;HTML&#xff09;的缩写&#xff0c;表示在js代码中编写HTML模板结构&#xff0c;它是React中编写UI模板的方式&#xff0c;如下图就是jsx: 优势&#xff1a;1.HTML的声明式模板写法&#xff1b;…
阅读更多...
【Go语言精进之路】构建高效Go程序：了解string实现原理并高效使用

【Go语言精进之路】构建高效Go程序：了解string实现原理并高效使用

&#x1f525; 个人主页&#xff1a;空白诗 &#x1f525; 热门专栏&#xff1a;【Go语言精进之路】 文章目录 引言一、Go语言的字符串类型1.1 字符串的定义1.2 字符串的零值可用1.3 字符串的不可变性1.4 字符串的拼接1.5 字符串的常用方法1.6 实际使用示例 二、字符串的内部表…
阅读更多...
HTML学习和JAVAScript学习

HTML学习和JAVAScript学习

HTML 标签 <!DOCTYPE html> <!-- 文档类型为html --> <html lang"en"> <head><meta charset"UTF-8"> <!-- 使用字符集UTF-8 --> <!-- 设置浏览器兼容性 --><meta name"viewpo…
阅读更多...
TCP/IP协议简要介绍

TCP/IP协议简要介绍

TCP/IP for IP version 4&#xff08;IPv4&#xff09;是一种网络协议&#xff0c;Microsoft Windows使用该协议通过internet与其他计算机进行通信。理想情况下&#xff0c;只要基于Windows的计算机通过网络进行通信&#xff0c;就会使用TCP/IP。 本文介绍TCP/IP协议的组成、协…
阅读更多...
vue2双层循环生成动态ref,并跳转到组件内的指定位置

vue2双层循环生成动态ref,并跳转到组件内的指定位置

话不用多说,先上一个视频,看看是不是你们需要的效果 vue2双层循环生成动态ref,并跳转到组件内的指定位置 <div class"menu-content" ref"menu"><el-collapse v-model"activeNames"><el-collapse-item style"padding: 10px;…
阅读更多...
Java每日作业day6.18

Java每日作业day6.18

ok了家人们今天我们继续学习方法的更多使用&#xff0c;闲话少叙&#xff0c;我们来看今天学了什么 1.重载 在同一个类中&#xff0c;可不可以存在同名的方法&#xff1f;重载:在同一个类中&#xff0c;定义了多个同名的方法&#xff0c;但每个方法具有不同的参数类型或参数个…
阅读更多...
传统车牌识别

传统车牌识别

主要参考&#xff1a;https://blog.csdn.net/qq_40784418/article/details/105586644 其它介绍&#xff1a; https://blog.csdn.net/great_yzl/article/details/120127962 https://blog.csdn.net/onepunch_k/article/details/115480904 cv2.matchTemplate https://docs.ope…
阅读更多...
三星SAINT-D技术引领HBM内存堆叠革命

三星SAINT-D技术引领HBM内存堆叠革命

三星电子即将在今年推出一项革命性技术&#xff0c;允许在CPU或GPU上堆叠高带宽内存&#xff08;HBM&#xff09;&#xff0c;根据韩国经济日报的报道&#xff0c;这一消息在圣何塞举办的三星晶圆代工论坛2024上公布&#xff0c;并得到业内消息人士证实。这项3D封装技术为2025年…
阅读更多...
ESP32蓝牙BLE连接米家温湿度计

ESP32蓝牙BLE连接米家温湿度计

ESP32蓝牙BLE连接米家温湿度计 文章目录 ESP32蓝牙BLE连接米家温湿度计简介需要准备的东西软件调试代码实现修改查找的名称 修改需要连接的服务和属性添加解析数据的代码 上电演示提示 简介 最近在学习低功耗蓝牙BLE(Bluetooth Low Energy)&#xff0c;刚好手里有个米家蓝牙温…
阅读更多...
总结一下 C# 如何自定义特性 Attribute 并进行应用

总结一下 C# 如何自定义特性 Attribute 并进行应用

前言 Attribute&#xff08;特性&#xff09;是一种用于为程序元素&#xff08;如类、方法、属性等&#xff09;提供元数据信息的方法。 特性是一种声明式的信息&#xff0c;附加到程序元素上&#xff0c;提供额外的数据用于描述和控制这些元素的行为。 在编译和运行时&…
阅读更多...
WMS系统调拨盘点功能：优化仓储管理效率

WMS系统调拨盘点功能：优化仓储管理效率

一、调拨功能概述 WMS系统的调拨功能是指仓库内部或者不同仓库之间对商品进行转移的过程。调拨的目的在于平衡库存、优化存储空间和提高物流效率。调拨功能主要包括以下几个方面&#xff1a; 1. 调拨申请&#xff1a;根据业务需求&#xff0c;仓库管理员可以发起调拨申请&…
阅读更多...
软件设计不是CRUD（23）：在流式数据处理系统中进行业务抽象落地——详细编码

软件设计不是CRUD（23）：在流式数据处理系统中进行业务抽象落地——详细编码

&#xff08;接上文《软件设计不是CRUD&#xff08;22&#xff09;&#xff1a;在流式数据处理系统中进行业务抽象落地——设计思考》&#xff09; 4、详细设计 项目开发初期&#xff0c;有两种测速雷达和对应的摄像头需要接入&#xff0c;分别是STC500型测速雷达和TTS400型测…
阅读更多...
《UNIX环境高级编程》第三版（电子工业出版社出品）——两年磨一剑的匠心译作

《UNIX环境高级编程》第三版（电子工业出版社出品）——两年磨一剑的匠心译作

历时两年&#xff0c;《UNIX环境高级编程》的翻译工作终于落下帷幕。这一路走来&#xff0c;真可谓是如鱼饮水&#xff0c;冷暖自知。还记得最初看到招募译者消息的那一刻&#xff0c;内心的激动难以言表。我毫不犹豫地报名&#xff0c;而后经历了试译、海选等激烈的角逐&#…
阅读更多...
TestProject Python SDK入门

TestProject Python SDK入门

2024软件测试面试刷题&#xff0c;这个小程序&#xff08;永久刷题&#xff09;&#xff0c;靠它快速找到工作了&#xff01;&#xff08;刷题APP的天花板&#xff09;-CSDN博客跳槽涨薪的朋友们有福了&#xff0c;今天给大家推荐一个软件测试面试的刷题小程序。​编辑https://…
阅读更多...
怎么提取视频中的音频？别错过这6个音频提取方法了！（全新）

怎么提取视频中的音频？别错过这6个音频提取方法了！（全新）

您是否曾经发现过一个音乐很棒的视频&#xff0c;并想从视频中提取音频&#xff1f;如今&#xff0c;关于提取mp4视频中的音频需求越来越常见。例如&#xff0c;您可能想从mp4格式的电影中提取音频&#xff0c;将音乐用作手机铃声&#xff0c;或在自己的视频项目中使用视频中的…
阅读更多...
C#唯一进程的处理Winform/WPF

C#唯一进程的处理Winform/WPF

C#唯一进程的处理 1.使用进程&#xff08;Process&#xff09;判断winformWPF执行效果&#xff1a; 2.使用互斥体&#xff08;Metux&#xff09;实现winformWPF实现效果&#xff1a; 在C#客户端&#xff08;Winform/WPF&#xff09;开发过程中&#xff0c;有的情况需要确保程序…
阅读更多...
零基础入门学用Arduino 第四部分（一）

零基础入门学用Arduino 第四部分（一）

重要的内容写在前面&#xff1a; 该系列是以up主太极创客的零基础入门学用Arduino教程为基础制作的学习笔记。个人把这个教程学完之后&#xff0c;整体感觉是很好的&#xff0c;如果有条件的可以先学习一些相关课程&#xff0c;学起来会更加轻松&#xff0c;相关课程有数字电路…
阅读更多...
Microsoft Visual C++ Redistributable 【安装包】【高速下载】

Microsoft Visual C++ Redistributable 【安装包】【高速下载】

方法1、可以从官方下载&#xff0c;如下图 方法2 已经下载好并且已经整理好了2008--2022的所有版本点击下方链接即可高速下载 如果是win7-win8-win10-win11直接可以下载2015--2022版本&#xff0c;xp需要下载2015之前的 点击链接Microsoft Visual C Redistributable官方版本…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023