要实现什么##

同事想做一张世界地图的背景图，但是网上找的图片都太low了。他想用那种密集的点阵组成的世界地图。作为程序员，想法当然是通过图片处理，识别像素点，然后生成新的图片。



目标是这样的：

实现思路##

其实稍微想一下就很容易想明白：

1. 获取图片数据

2. 分析像素点，判断是不是空白 （每个像素点的rgb色值不是255或某个阈值： r<255 || g<255 || b<255），就替换成指定颜色像素点

3. 把图片划分成像素块， 某一个像素块里空白面积小于 50%（看需求设定阈值），判断为填充点，否则变为透明。

4. 重新绘制图片。

不拘泥于语言，基本思路都是这样。下面是一个Canvas版本：

<!DOCTYPE html>

<html lang="zh-CN" class=" no-touch"><head>

<head><title>Canvas 转点阵</title></head>

<body>

<img src="./timg.jpg" id='img' style="display:none;"  />

<div id="container" style="width:1200px;height:1038px">

<canvas id="cvs" width="1200" height="1038"></canvas>

</div>

<script type="text/javascript">

    // 判断像素块是否空白or像素覆盖

    function isCover(imgdata, width, x, y) {

        var covered = 0;

        // 像素快为 8*8

        for (var i=x; i<x+8; i++) {

            for (var j=y; j<y+8; j++) {

                var idx = i*4*width + 4*j;

                // 阈值设为192

                if (imgdata[idx]<192 || imgdata[idx+1]<192 || imgdata[idx+2]<192 ) {

                    covered++;

                }

                // 覆盖面积超过 45/64

                if (covered > 45) {

                    return true;

                }

            }

        }

        return false;

    }

    // 填充像素块

    function drawPoints(imgdata, width, x, y, clear=false) {

        for (var i=x; i<x+8; i++) {

            for (var j=y; j<y+8; j++) {

                var idx = i*4*width + 4*j;

                if (i >=x+2 && i<x+6 && j>=y+2 && j<y+6 && !clear) {

                    // 画小方块

                    imgdata[idx] = 168;

                    imgdata[idx+1] = 168;

                    imgdata[idx+2] = 168;

                    imgdata[idx+3] = 192;

                } else {

                    // 置为空白

                    imgdata[idx] = 255;

                    imgdata[idx+1] = 255;

                    imgdata[idx+2] = 255;

                    imgdata[idx+3] = 0;

                }

            }

        }

        return imgdata;

    }

    // 点阵转换

    function convertPointArray(img) {

        for (var i=0; i<img.height; i=i+8) {

            for (var j=0; j<img.width; j=j+8) {

                var isCovered = isCover(img.data, img.width, i, j);

                if (isCovered) {

                    img.data = drawPoints(img.data, img.width, i, j);

                } else {

                    // 其他区域直接清空

                    img.data = drawPoints(img.data, img.width, i, j, true);

                }

            }

        }

        return img;

    }

    function _init() {

        var cvs = document.getElementById('cvs'),

            ctx = cvs.getContext('2d'),

            img = new Image();

        img = document.getElementById('img');

        img.crossOrigin = "*";

        img.onload = function() {

            // 把图片放到canvas 画布上

            ctx.drawImage(img, 0, 0, cvs.width, cvs.height);

            // 获取像素数据

            var imageData = ctx.getImageData(0, 0, cvs.width, cvs.height);

            // 转换

            imageData = convertPointArray(imageData);

            // 擦除原来的图片

            ctx.clearRect(0, 0, cvs.width, cvs.height);

            // 重新绘图

            ctx.putImageData(imageData, 0, 0);

        }

    }

    _init();

</script>

</body>

</html>

基于Canvas 实现图片转点阵图的更多相关文章

  1. 基于 canvas 将图片转化成字符画

    字符画大家一定非常熟悉了,那么如何把一张现有的图片转成字符画呢? HTML5 让这个可能变成了现实,通过 canvas,可以很轻松实现这个功能. 其实原理很简单:扫描图片相应位置的像素点,再计算出其灰 ...

  2. 基于canvas将图片转化成字符画

    字符画大家一定非常熟悉了,那么如何把一张现有的图片转成字符画呢?HTML5让这个可能变成了现实,通过canvas,可以很轻松实现这个功能.其实原理很简单:扫描图片相应位置的像素点,再计算出其灰度值,根 ...

  3. 一款基于jQuery的图片分组切换焦点图插件

    这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...

  4. 基于canvas图像处理的图片展示demo

    图片展示网页往往色彩繁杂,当一个网页上有多张图片的时候用户的注意力就很不容易集中,而且会造成网站整个色调风格的不可把控. 能不能把所有的预览图变成灰度图片,等用户激活某张图片的时候再上色呢? 以前,唯 ...

  5. 基于canvas图像处理的图片 灰色图像

    图片展示网页往往色彩繁杂,当一个网页上有多张图片的时候用户的注意力就很不容易集中,而且会造成网站整个色调风格的不可把控. 能不能把所有的预览图变成灰度图片,等用户激活某张图片的时候再上色呢? 以前,唯 ...

  6. 基于HTML5实现的Heatmap热图3D应用

    Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. 已有众多文章分享了生成Heatmap热图原 ...

  7. HTML5利用canvas，把多张图合并成一张图片

    需求分析,根据当前网页中的几张图片,在手机上长按,保存图片到相册或者发送给好友. drawCanvas(){ var self = this; var imgsrcArray = [ require( ...

  8. 基于canvas的二维码邀请函生成插件

    去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenn ...

  9. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

随机推荐

  1. SSAS——基础

    一.Analysis Services Analysis Services是用于决策支持和BI解决方案的数据引擎.它提供报表和客户端中使用的分析数据. 它可在多用途数据模型中创建高性能查询结构,业务逻 ...

  2. hihocoder-1274 自行车架(高维dp)

    时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi的宿舍楼下有一块用于停自行车的区域.平时自行车都停得非常杂乱,于是楼长打算去买一排自行车架用来停车.自行车架一般有P个 ...

  3. linux命令学习笔记（15）：tail 命令

    tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件, tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不但刷新 ...

  4. Java中的参数传值方式

    本文转载自 https://blog.csdn.net/SEU_Calvin/article/details/70089977 1.  你觉得下面程序会输出什么 public static void  ...

  5. 【IPC通信】key_t键和ftok函数

    System V IPC分为三种: System V消息队列 System V信号量 System V共享内存区 这三种类型的IPC使用key_t值做为它们的名字. key_t这个数据类型在<s ...

  6. bzoj 1398: 寻找主人 AC自动机+最小表示法

    题目大意: 给定两个序列判断是否循环同构,若循环同构则输出最小表示 题解: 因为没有样例输入输出,一开始没看到要求输出最小表示 Wa一大页. 但不得不说bzoj还是挺高效的: 赞一个 XD.jpg 判 ...

  7. RenderMonkey基本使用方法

    http://www.cnblogs.com/mixiyou/archive/2009/10/05/1578208.html 楔子: 差不多从年中开始由于工作需要,开始研究Direct3D,这是继大二 ...

  8. linux下dns设置详解

    DNS就是Domain Name System,它能够把形如www.21php.com这样的域名转换为211.152.50.35这样的IP地址;没有DNS,浏览21php.com这个网站时,就必须用2 ...

  9. Makefile经典教程

    转自:http://blog.csdn.net/ruglcc/article/details/7814546/       makefile很重要 什么是makefile?或许很多Winodws的程序 ...

  10. ASP.NET MVC 3:缓存功能的设计问题

    今天这一篇文章我来谈一谈在MVC 3项目中的缓存功能,以及针对缓存的一些设计上的考量,给大家参考参考. 为什么需要讨论缓存?缓存是一个中大型系统所必须考虑的问题.为了避免每次请求都去访问后台的资源(例 ...