需求：

目前已经对地图瓦片做了复杂滤镜的黑夜展示，现在又要在这个图片上绘制新的线段等内容，且不能被这个复杂滤镜影响，变成奇奇怪怪的颜色。

同时因为框架限制，只能在这个img上绘制

思考：

1、既然不想影响新的内容，那么只能拆分开来绘制？

可是如果直接在页面上拆分，逻辑太复杂，效率也太低

2、那么索性直接彻底拆开？

干脆对复杂滤镜的图片进行保存，使这个图片能保留滤镜的效果。然后重新引入这个图片~

还好这个图片确实不会变，都是资源库的，说干就干！

解决方案：

原理很简单，就是在原来image的基础上，新建一个canvas，然后增加滤镜效果，画出这个图片，最后保存这个图片到本地。

js代码简单版本（未实现批量）

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Apply Filter to Image</title>

</head>

<body>

    <img id="originalImage" src="data:image_path.jpg" alt="Original Image">

    <canvas id="canvas" style="display: none;"></canvas>

    <script>

        const originalImage = document.getElementById('originalImage');

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

        const ctx = canvas.getContext('2d');

        originalImage.onload = function() {

            canvas.width = originalImage.width;

            canvas.height = originalImage.height;

            ctx.filter = 'brightness(0.9) contrast(1.3) grayscale(1) hue-rotate(140deg) opacity(1) saturate(1) sepia(1) invert(1)';

            ctx.drawImage(originalImage, 0, 0);

            const filteredImageUrl = canvas.toDataURL('image/png');

            // 创建一个新的图片元素来显示处理后的图片

            const filteredImage = new Image();

            filteredImage.src = filteredImageUrl;

            // 将处理后的图片添加到页面中

            document.body.appendChild(filteredImage);

        };

        originalImage.src = "image_path.jpg";

    </script>

</body>

</html>

【离线地图】地图瓦片css复杂滤镜线段绘制的更多相关文章

  1. arcgis10.2 的安装与离线发布地图

    一.ArcGIS for Desktop安装 ArcGIS安装 方法/步骤1:LicenseManager安装 1.首先要下载Arcgis 10.2软件,很大大约有4个多G.下载后可以用虚拟光驱,DA ...

  2. openlayers6结合geoserver实现地图矢量瓦片(附源码下载)

    内容概览 1.基于openlayers6结合geoserver实现地图矢量瓦片2.源代码demo下载 效果图如下: 实现思路:利用Geoserver发布矢量切片服务,然后openlayers调用矢量瓦 ...

  3. 局域网Cesium离线影像及瓦片影像地图加载

    1.Cesium简介 优点: cesium展示地图数据效果比较好,解析2D地图各种不同服务类型的数据源,比如百度地图.天地图.arcgis地图.BingMap.openStreetMap.MapBox ...

  4. openlayers模仿google地图--地图版权随鹰眼关闭打开而改变位置

    额..题目有点长......今天有个群友问我.想实现google地图地图版权随鹰眼关闭状态改变位置的功能.就是这种<ignore_js_op> 打开鹰眼时  地图版权也随着鹰眼位置改变而改 ...

  5. LOJ#121. 「离线可过」动态图连通性(线段树分治)

    题意 板子题,题意很清楚吧.. Sol 很显然可以直接上LCT.. 但是这题允许离线,于是就有了一个非常巧妙的离线的做法,好像叫什么线段树分治?? 此题中每条边出现的位置都可以看做是一段区间. 我们用 ...

  6. JS 百度地图 地图线路描绘

    JS 百度地图 地图线路描绘 <script type="text/javascript" src="http://api.map.baidu.com/api?v= ...

  7. 简单说 通过CSS的滤镜 实现 火焰效果

    说明 上次我们了解了一些css滤镜的基础知识, 简单说 CSS滤镜 filter属性 这次我们就来用css的滤镜实现一个 火焰的效果. 解释 要实现上面的火焰效果,我们先来了解一些必要的东西. 上次我 ...

  8. ArcGIS Engine 线段绘制

    转自ArcGIS Engine 线段绘制研究 基本步骤 构建形状 1. 创建 IPoint IPoint m_Point = new PointClass(); m_Point.PutCoords(x ...

  9. CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画

    最近一直在使用 css-doodle 实现一些 CSS 效果. css-doodle 是一个基于 Web-Component 的库.允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 C ...

  10. WebGIS开发之用openlayers加载离线百度地图

    因为项目需要,只有内网环境,没有外网环境,所以需要下载地图瓦片. 一.下载瓦片地图 这个可以自行在网上找一些地图瓦片下载器,下好的瓦片地图是分级的.大概如图这种类型. 二.在地图上显示标记 首先使用o ...

随机推荐

  1. Qt开发经验小技巧166-170

    有时候需要暂时停止某个控件发射信号(比如下拉框combobox添加数据的时候会触发当前元素改变信号),有多种处理,推荐用 blockSignals 方法. //方法1:先 disconnect 掉信号 ...

  2. C#HTTP网络请求时GetResponseAsync()方法抛出“远程服务器返回错误: (411) 所需的长度”异常

    在请求HttpWebRequest的报了如下的错误"远程服务器返回错误: (411) 所需的长度",结果网上 百度了一下说,再请求POST的时候,若没有参数的情况下,需要将进行如下 ...

  3. 不为人知的网络编程(十二)：彻底搞懂TCP协议层的KeepAlive保活机制

    文中引用了参考资料中的部分内容,本文参考资料详见文末"参考资料"一节,感谢资料分享者. 1.引言 对于IM开发者而言,网络保活这件事再熟悉不过了,比如这是我最近一篇有关网络保活话题 ...

  4. 一个R包—reticulate—在R中调用Python

    R语言和python语言是生信行业经常使用的两个计算机语言,R语言具有统计和画图方面的优势,但是R语言在文件读写上的速度实在不敢恭维:Python具有较快的文件读写功能,但是其统计和画图却不如R语言用 ...

  5. Mac_工具使用汇总

      Mac安装低版本的Xcode后会出现各种问题,现汇总如下: 1. python3: error: unable to find utility "python3", not a ...

  6. Note -「广义二项级数」浅赏

      上回 说到拉反和扩展拉反,那么这里先给几个小小变形或推广.   基础 ver: \[\begin{align} [x^n]G(x) &= \frac{1}{n}[x^{n-1}](F(x) ...

  7. 拥有自己的解析器（C#实现LALR(1)语法解析器和miniDFA词法分析器的生成器）

    拥有自己的解析器(C#实现LALR(1)语法解析器和miniDFA词法分析器的生成器) 参考lex和yacc的输入格式,参考虎书<现代编译原理-C语言描述>的算法,不依赖第三方库,大力整合 ...

  8. 『Python底层原理』--CPython 虚拟机

    在 Python 编程的世界里,我们每天都在使用 python 命令运行程序,但你是否曾好奇这背后究竟发生了什么? 本文将初步探究 CPython(Python 中最流行的实现)的一些内部机制,为了更 ...

  9. dart中所有的循环详解

    List MyList = ['苹果', '栗子', '小苹果']; for (var i = 0; i < MyList.length; i++) { print(MyList[i]); } ...

  10. not in 和 not exists 比较和用法

    尽量不要使用not in(它会调用子查询),而尽量使用not exists(它会调用关联子查询).查询语句使用了not in,那么对内外表都进行全表扫描,没有用到索引:而not exists的子查询依 ...