要实现什么##

同事想做一张世界地图的背景图，但是网上找的图片都太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. 分享知识-快乐自己：shiro 异常类型

    <!-- 身份认证异常 --> 1):身份令牌异常,不支持的身份令牌 --> org.apache.shiro.authc.pam.UnsupportedTokenException ...

  2. C++（八）— 死锁原因及解决方法

    1.死锁原因 死锁问题被认为是线程/进程间切换消耗系统性能的一种极端情况.在死锁时,线程/进程间相互等待资源,而又不释放自身的资源,导致无穷无尽的等待,其结果是任务永远无法执行完成. 打个比方,假设有 ...

  3. Java微信小程序开发_00_资源帖

    1.微信小程序开发:http://blog.csdn.net/column/details/13721.html?&page=1 2.微信小程序栏目:http://blog.csdn.net/ ...

  4. Navicate一个有用的注册码

    NAVH-WK6A-DMVK-DKW3 百度直接得到,

  5. 设计模式 之 《建造者模式（Builder）》

    #ifndef __BUILDER_MODEL__ #define __BUILDER_MODEL__ #include <string> #include <vector> ...

  6. Codechef Union on Tree

    Codechef Union on Tree https://www.codechef.com/problems/BTREE 简要题意: 给你一棵树,\(Q\)次询问,每次给出一个点集和每个点的\(r ...

  7. ACM学习历程—HYSBZ 2818 Gcd(欧拉函数 || 莫比乌斯反演)

    Description 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. Input 一个整数N Output 如题 Sample Input 4 Sam ...

  8. bzoj 5120 无限之环 & 洛谷 P4003 —— 费用流(多路增广SPFA)

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=5120 https://www.luogu.org/problemnew/show/P4003 ...

  9. bzoj 1070 修车 —— 费用流

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1070 需要考虑前面修的车对后面等待的车造成的时间增加: 其实可以从每个人修车的顺序考虑,如果 ...

  10. Sublime 实践

    1.下载开发版:http://www.sublimetext.com/dev 2.安装Package control: (1)按键ctrl+~ (2)在命令行中输入:  import urllib2, ...