概述

对于栅格数据，为提升网络的传输效率，通过一定的计算公式将栅格数据压缩成一个灰度图，在通过客户端进行解析渲染是常见的一种手段。本文将结合canvas实现此功能。

效果

测试数据

测试数据来源于ventusky上的温度图，渲染的色标也用了该网站上面的。

实现代码

  const canvas = document.getElementById('canvas');canvas.width = window.innerWidthcanvas.height = window.innerHeightconst ctx = canvas.getContext('2d');const legends = [{"v":50,"c":"rgb(43, 0, 1)"},{"v":40,"c":"rgb(107, 21, 39)"},{"v":30,"c":"rgba(190, 48, 102, 0.92)"},{"v":25,"c":"rgba(229, 109, 83, 0.92)"},{"v":20,"c":"rgba(234, 164, 62, 0.92)"},{"v":15,"c":"rgba(235, 215, 53, 0.92)"},{"v":10,"c":"rgba(190, 228, 61, 0.92)"},{"v":5,"c":"rgba(89, 208, 73, 0.92)"},{"v":0,"c":"rgba(75, 182, 152, 0.92)"},{"v":-5,"c":"rgba(62, 121, 198, 0.92)"},{"v":-10,"c":"rgba(85, 78, 177, 0.92)"},{"v":-15,"c":"rgba(36, 24, 106, 0.92)"},{"v":-20,"c":"rgba(145, 9, 145, 0.92)"},{"v":-30,"c":"rgba(255, 170, 255, 0.92)"},{"v":-40,"c":"rgba(238, 238, 238, 0.92)"}]class Palette {constructor(legends) {this._init(legends)}_init(legends) {// 创建canvaslet canvas = document.createElement("canvas");canvas.width = 10;canvas.height = 256;let ctx = canvas.getContext("2d");// 创建线性渐变色let linearGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);const max = legends[0].v,min = legends[legends.length - 1].v - 10this.colorStops = {}legends.forEach(legend => {const k = (legend.v - min) / (max - min)linearGradient.addColorStop(k, legend.c);})// 绘制渐变色条ctx.fillStyle = linearGradient;ctx.fillRect(0, 0, canvas.width, canvas.height);// 读取像素数据this.imageData = ctx.getImageData(0, 0, 1, canvas.height).data;this.canvas = canvas;}colorPicker(position) {return this.imageData.slice(position * 4, position * 4 + 3);}}const palette = new Palette(legends)const img = new Image()img.src = './tem.jpg'let imgData = nullimg.onload = function () {// 离屏const w = img.width, h = img.heightconst _canvas = document.createElement('canvas');_canvas.width = w_canvas.height = hconst _ctx = _canvas.getContext('2d');_ctx.drawImage(img, 0, 0)imgData = _ctx.getImageData(0, 0, w, h)ctx.putImageData(imgData, 0, 0)const data = imgData.datalet val = []for (let i = 0; i < data.length; i+=4) {let pos = data[i];val.push(pos)}val = val.sort((a, b) => a - b)const min = val[0],max = val[val.length - 1]for (let i = 0; i < data.length; i+=4) {let pos = data[i];pos = Math.floor(((pos - min) / (max - min)) * 256)let color = palette.colorPicker(pos);data[i] = color[0];data[i + 1] = color[1];data[i + 2] = color[2];data[i + 3] = 255;}// 展示imgctx.putImageData(imgData, w + 10, 0)// 绘制图例const _w = palette.canvas.width, _h = palette.canvas.height / 2const x = 25, y = canvas.height - 20 - _hctx.fillStyle = 'white'ctx.shadowBlur = 10ctx.shadowColor = '#ccc'ctx.shadowOffsetX = 2ctx.shadowOffsetY = 2ctx.textAlign = 'left'ctx.fillRect(x - 10, y - 10, _w + 40, _h + 20)ctx.drawImage(palette.canvas, x, y, _w, _h)// 绘制文字ctx.fillStyle = '#000'ctx.textBaseline = 'top'ctx.fillText(legends[legends.length - 1].v, x + _w + 6, y)ctx.textBaseline = 'bottom'ctx.fillText(legends[0].v, x + _w + 6, y + _h)}

结合到openlayers中：

  const legends = [{"v":50,"c":"rgb(43, 0, 1)"},{"v":40,"c":"rgb(107, 21, 39)"},{"v":30,"c":"rgba(190, 48, 102, 0.92)"},{"v":25,"c":"rgba(229, 109, 83, 0.92)"},{"v":20,"c":"rgba(234, 164, 62, 0.92)"},{"v":15,"c":"rgba(235, 215, 53, 0.92)"},{"v":10,"c":"rgba(190, 228, 61, 0.92)"},{"v":5,"c":"rgba(89, 208, 73, 0.92)"},{"v":0,"c":"rgba(75, 182, 152, 0.92)"},{"v":-5,"c":"rgba(62, 121, 198, 0.92)"},{"v":-10,"c":"rgba(85, 78, 177, 0.92)"},{"v":-15,"c":"rgba(36, 24, 106, 0.92)"},{"v":-20,"c":"rgba(145, 9, 145, 0.92)"},{"v":-30,"c":"rgba(255, 170, 255, 0.92)"},{"v":-40,"c":"rgba(238, 238, 238, 0.92)"}]class Palette {constructor(legends) {this._init(legends)}_init(legends) {// 创建canvaslet canvas = document.createElement("canvas");canvas.width = 10;canvas.height = 256;let ctx = canvas.getContext("2d");// 创建线性渐变色let linearGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);const max = legends[0].v,min = legends[legends.length - 1].v - 10this.colorStops = {}legends.forEach(legend => {const k = (legend.v - min) / (max - min)linearGradient.addColorStop(k, legend.c);})// 绘制渐变色条ctx.fillStyle = linearGradient;ctx.fillRect(0, 0, canvas.width, canvas.height);// 读取像素数据this.imageData = ctx.getImageData(0, 0, 1, canvas.height).data;this.canvas = canvas;}colorPicker(position) {return this.imageData.slice(position * 4, position * 4 + 3);}}const palette = new Palette(legends)const img = new Image()img.src = './data/tem.jpg'img.onload = function () {// 离屏const w = img.width, h = img.heightconst _canvas = document.createElement('canvas');_canvas.width = w_canvas.height = hconst _ctx = _canvas.getContext('2d');_ctx.drawImage(img, 0, 0)const imgData = _ctx.getImageData(0, 0, w, h)const data = imgData.datalet val = []for (let i = 0; i < data.length; i+=4) {let pos = data[i];val.push(pos)}val = val.sort((a, b) => a - b)const min = val[0],max = val[val.length - 1]for (let i = 0; i < data.length; i+=4) {let pos = data[i];pos = Math.floor(((pos - min) / (max - min)) * 256)let color = palette.colorPicker(pos);data[i] = color[0];data[i + 1] = color[1];data[i + 2] = color[2];data[i + 3] = 150;}// 展示img_ctx.putImageData(imgData, 0, 0)const imgLayer = new ol.layer.Image({source: new ol.source.ImageStatic({url: _canvas.toDataURL(),imageExtent: [-180, -90, 180, 90]})})map.addLayer(imgLayer);
}

栅格数据灰度化并前端转换展示相关推荐

OpenCV+CUDA学习2---图像灰度化
对于图像灰度化,使用了opencv-cuda实现与完全基于cuda实现,本程序中参考了网上多个教程,主要记录和学习的过程. 目录 1.opencv+cuda实现图像灰度化 2.CUDA实现图像灰度化 ...
【matlab 图像处理】通道互换推向颜色模式转换图像灰度化
1.蓝绿通道互换 p1 = imread('test1.jpg'); % 读取图像文件p2 = p1; % 相当于将图像复制赋值给p2 p2(:,:,2)=p1(:,:,3); % 将p1蓝色通道赋值 ...
MATLAB基础图形处理实现图形通道转换灰度化旋转缩放镜像拼接
%practice,还是以彩色荷花图片lotus为例 %读入图片数据 Image1=imread('carphone.jpg');%图片1是原图,汽车与手机JPG格式的原图 %红绿通道互换 Image ...
【图像处理】——图像的灰度化处理（Python实现三种方法——最大值法、平均值法、加权均值法、gamma校正）
目录一.什么是图像的灰度化? 二.灰度化的几种方法(最大值法.平均值法.加权均值法.gamma校正) 1.直接调用函数:cv2.cvtColor() 图像颜色空间转换 2.最大值法 (1)概念 (2 ...
马蜂窝容器化平台前端赋能实践
容器对前端开发真的有用吗?答案是肯定的. 最初当我向公司的前端同学「安利」容器技术的时候,很多人都会说:「容器?这不是用在后端的技术吗?我不懂啊,而且前端开发用不上吧.」但其实,今天我们讨论的「前端 ...
matlab实现彩色图像灰度化的三种方法
一.概要将彩色图像转换为灰度图像的过程称为灰度化处理. 对于图像而言,灰度化处理就是使彩色的R,G,B分量值相等的过程. 灰度化处理的方法主要有如下3种: 最大值法:使R,G,B的值等于3值中最大的 ...
图像的色彩类别，灰度化，二值化
灰度化:在RGB模型中,如果R=G=B时,则彩色表示一种灰度颜色,其中R=G=B的值叫灰度值,因此,灰度图像每个像素只需一个字节存放灰度值(又称强度值.亮度值),灰度范围为0-255.一般常用的是加权 ...
opencv入门课程：彩色图像灰度化和二值化（采用skimage库和opencv库两种方法）
用最简单的办法实现彩色图像灰度化和二值化: 首先采用skimage库(skimage库现在在scikit_image库中)实现: from skimage.color import rgb2gray ...
【转】c#数字图像处理（二）彩色图像灰度化，灰度图像二值化
转自:https://www.cnblogs.com/dearzhoubi/p/8571652.html 为加快处理速度,在图像处理算法中,往往需要把彩色图像转换为灰度图像,在灰度图像上得到验证的算法 ...
【OpenCV 例程200篇】37. 图像的灰度化处理和二值化处理
[OpenCV 例程200篇]37. 图像的灰度化处理和二值化处理欢迎关注『OpenCV 例程200篇』系列,持续更新中欢迎关注『Python小白的OpenCV学习课』系列,持续更新中按 ...

栅格数据灰度化并前端转换展示

概述

效果

测试数据

实现代码

栅格数据灰度化并前端转换展示相关推荐

最新文章

热门文章