要实现什么##

同事想做一张世界地图的背景图，但是网上找的图片都太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. java:Map借口及其子类HashMap四

    java:Map借口及其子类HashMap四 使用非系统对象作为key,使用匿名对象获取数据 在Map中可以使用匿名对象找到一个key对应的value. person: public class Ha ...

  2. 关于c++中char*、char ch[]和string区别

    一.字符串指针: char* ch="hello"; 这里的"hello"是字符串常量,是不可以改变的,即通过ch[0]="s"会编译出错. ...

  3. codeforces 628C C. Bear and String Distance

    C. Bear and String Distance time limit per test 1 second memory limit per test 256 megabytes input s ...

  4. codeforces 631C C. Report

    C. Report time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...

  5. bzoj 3091: 城市旅行 LCT

    题目: http://www.lydsy.com/JudgeOnline/problem.php?id=3091 题解: 首先前三个操作就是裸的LCT模板 只考虑第四个操作. 要求我们计算期望,所以我 ...

  6. VBA记录当前系统时间并精确到毫秒

    想做个功能,点一次按钮,就在A1记录一次当前系统时间,要精确到毫秒的.再点一次按钮就在A2显示,以此类推! 例如:这个功能可以用来做歌词记时间! Sub ttt() ActiveCell.Select ...

  7. UML Design Via Visual Studio-Class Diagram

    用过几个建模设计工具,小的有staruml,大的有rational rose,EA.最后发现还是Visual Studio建模比较舒服(个人观点,不要争论). 打算对自己经常用的几个建模图做一个介绍, ...

  8. EXPLAIN 命令

    MySQL EXPLAIN 命令详解 MySQL的EXPLAIN命令用于SQL语句的查询执行计划(QEP).这条命令的输出结果能够让我们了解MySQL 优化器是如何执行SQL 语句的.这条命令并没有提 ...

  9. MySQL数据库服务器参数优化mycnf,16G内存8核CPU,

    业务场景: 后台支持手机在线更新系统,db服务器内存16G,8核,dell的pc服务器. qps: 200个左右 tps: 1个左右 一分钟50几个 sort_buffer_size = 32M 大了 ...

  10. POJ 2017 No Brainer(超级水题)

    一.Description Zombies love to eat brains. Yum. Input The first line contains a single integer n indi ...