要实现什么##

同事想做一张世界地图的背景图，但是网上找的图片都太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. 英语发音规则---发/i:/的字母及字母组合

    英语发音规则---发/i:/的字母及字母组合 一.总结 一句话总结: 1.字母组合ee发/iː/? bee beef see agree week meeting feel sweet free be ...

  2. 恢复delete删除的数据

    SELECT * FROM tablename AS OF TIMESTAMP TO_TIMESTAMP('2010-12-15 11:10:17', 'YYYY-MM-DD HH:MI:SS')

  3. Struts2 - ModelDriven 拦截器、Preparable 拦截器

    开篇:拦截器在Struts中的作用 在我们的web.xml中,我们配置了一个过滤器,实现将所有请求交付StrutsPrepareAndExecuteFilter类.一旦接受到任意action的请求,该 ...

  4. php中socket的使用

    php中使用socket在服务器端主要使用这么几个函数: 1/$socket = socket_create(AF_INET,SOCK_STREAM,SOL_TCP)创建一个socket 2/sock ...

  5. 搭建 Http Dynamic Streaming 点播/直播服务器

    1.        HTTP Origin Module的处理数据流: a)         客户端发送媒体索引请求到Apache.例如: http://www.example.com/media/  ...

  6. 【原创】C++实现获取本机机器名及外网IP代码

    上代码: #include "stdafx.h" #include <WINSOCK2.H> #include <urlmon.h> #pragma com ...

  7. HihoCoder1663双阶乘的末尾数字（[Offer收割]编程练习赛40）（暴力||数学）

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定正整数x和k,判断是否存在正整数1 ≤ y ≤ x使得x与y同奇偶且(x!!)/(y!!)的个位数字为k. 其中x!! ...

  8. URAL1517Freedom of Choice（后缀数组）

    Background Before Albanian people could bear with the freedom of speech (this story is fully describ ...

  9. 对存在JavaScript隐式类型转换的四种情况的总结

    一般存在四种情况,JavaScript会对变量的数据类型进行转换. 目录 * if中的条件会被自动转为Boolean类型 * 会被转为false的数据 * 会被转为true的数据 * 参与+运算都会被 ...

  10. JSONP -- 跨域数据交互协议

    一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式 ...