要实现什么##

同事想做一张世界地图的背景图，但是网上找的图片都太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. 关于输出用%lf和%f的问题

    关于输入,float用%f,double用%lf 而输出时,无论是float还是double,都用%f 原文请见:http://poj.org/showmessage?message_id=12692 ...

  2. 【BZOJ 4709】柠檬 斜率优化dp+单调栈

    题意 给$n$个贝壳,可以将贝壳分成若干段,每段选取一个贝壳$s_i$,这一段$s_i$的数目为$num$,可以得到$num^2\times s_i$个柠檬,求最多能得到几个柠檬 可以发现只有在一段中 ...

  3. windows 安装 pytorch

    之前都在服务器上跑pytorch,近来发现新版本可在windows上跑了,甚是开心. 环境: windows7  python3 无CPU 步骤: 1. 确保确保python版本在3.5.3/3.6. ...

  4. 【遍历二叉树】10判断二叉树是否平衡【Balanced Binary Tree】

    平衡的二叉树的定义都是递归的定义,所以,用递归来解决问题,还是挺容易的额. 本质上是递归的遍历二叉树. ++++++++++++++++++++++++++++++++++++++++++++++++ ...

  5. google android sdk下载hoosts

    203.208.46.146 www.google.com #这行是为了方便打开Android开发官网 现在好像不VPN也可以打开 74.125.113.121 developer.android.c ...

  6. 一个能获取如果hash或search是中文的内容小例子

    代码: (function () { var url = "http//baidu.com#a=你好&b=world"; var url1 = "http//ba ...

  7. Rails多个复选框--check_box_tag

    一.简单粗暴的解决方法 view <% @roles.each do |role| %> <%= check_box_tag 'roles[]', role.id%> < ...

  8. ES6学习之函数扩展

    函数默认参数 function test(x = 1, y = 2) { return x + y } test(5, 6) test() 若默认参数在必须参数之前,要想取得默认参数,只有当传入的值为 ...

  9. mysql查询语句例题

    1.一条SQL语句查询两表中两个字段 首先描述问题,student表中有字段startID,endID.garde表中的ID需要对应student表中的startID或者student表中的endID ...

  10. js插件库+bootstrap

    1.Chart.js 官网地址:http://chartjs.cn/ 2.优秀的bootstrap模板推荐 官网地址:http://bootswatch.com 3.wow+animate+js插件库 ...