对灰度图进行彩色化是数据可视化中常见的需求,使用d3在客户端比较容易实现,本文使用d3生成图片,并显示:

代码如下:

代码中首先下载数据文件,然后设定d3的色带信息,生成一个空白的canvas元素,并对元素的,通过d3插值颜色,给每个点设定颜色信息,并显示出来:

 d3.request("data/geos/current/" + IdwPro[options.pro].file)
.responseType("arraybuffer")
.response(function (req) {
var values=req;
console.info(values); //色带信息。
var color = d3.scaleLinear().domain([193, 206, 219, 233.15, 255.372, 273.15, 275.15, 291, 298, 311, 328])
.range([d3.rgb(37, 4, 42), d3.rgb(41, 10, 130), d3.rgb(81, 40, 40),
d3.rgb(192, 37, 149), d3.rgb(70, 215, 215), d3.rgb(21, 84, 187),
d3.rgb(24, 132, 14), d3.rgb(247, 251, 59), d3.rgb(235, 167, 21),
d3.rgb(230, 71, 39), d3.rgb(88, 27, 67)])
.interpolate(d3.interpolateHcl);
//图片高度
var width = 720,
height = 360; var _blankcanvas = document.createElement("canvas");
_blankcanvas.width = width;
_blankcanvas.height = height;
var blankcanvas = _blankcanvas.getContext("2d").getImageData(0, 0, width, height);
var _idwcontext = document.createElement("canvas");
_idwcontext.width = width;
_idwcontext.height = height; var idwcontext = _idwcontext.getContext("2d"); var c, i = 0,
n = width * height * 4,
blankimg = blankcanvas.data; var d = new Uint8ClampedArray(n);
//console.info(image.data);
for (var i = 0; i < height; i++) {
var istar = width * i;
var istart = (height - i) * width;
for (var j = 0; j < width; j++) { c = d3.rgb(color(values.blocks[0][(istar + j)]));
blankimg[(istart + j) * 4 + 0] = c.r;
blankimg[(istart + j) * 4 + 1] = c.g;
blankimg[(istart + j) * 4 + 2] = c.b;
blankimg[(istart + j) * 4 + 3] = 255;
}
} idwcontext.putImageData(blankcanvas, 0, 0);
// }).get();

最新文章

  1. SQLserver 备份和还原 失败
  2. Flex4 vs Flex3: Repeater vs DataGroup
  3. yii2.0高级框架配置时打开init.bat秒退的解决方法 (两种方法)
  4. Map,HashMap
  5. Linux C 程序 函数,数组,指针,gdb调试器(SEVEN)
  6. 互联网挣钱info
  7. Jquery使用tbody编辑功能实现table输入计算功能
  8. crontab经验
  9. [转] iOS多线程编程之NSOperation和NSOperationQueue的使用
  10. Hadoop在Windows下的安装配置
  11. 【BZOJ3450】【Tyvj1952】Easy 可能DP
  12. [SinGuLaRiTy] 字节大小
  13. java实现oracle数据库基本操作
  14. No Spring WebApplicationInitializer types detected on classpath 问题的一种解决办法
  15. Ubuntu虚拟机识别不了SD卡的解决办法
  16. 扩容 swap 分区
  17. Docker Swarm volume 数据持久化
  18. python 关于文件的操作
  19. xtrabackup备份MySQL
  20. vue父组件数据改变,子组件数据并未发生改变(那是因为你没写监听)附带子组件的写法

热门文章

  1. spring + mybatis 存取clob
  2. odoo 开发基础 -- 视图之widget
  3. vue2打包时内存溢出解决方案
  4. Decorator装饰者模式(结构型模式)
  5. 【原创】基于Bootstrap的Modal二次封装
  6. Google CodeJam 2016 round3-A.Teaching Assistant
  7. 单线程实现同时监听多个端口(windows平台c++代码)
  8. js便签笔记(8)——js加载XML字符串或文件
  9. Jetty学习四:部署到Jetty
  10. vue的路由懒加载