利用javascript获取图片像素生成矩阵像素点重新生成HTML格式图片，非＜img＞标签，对欺骗广告拦截插件可能会有效果

利用javascript获取图片像素生成矩阵像素点重新生成HTML格式图片，非<img>标签

如以下格式：

<svg width='393' height='1' style='display: block;'>
<rect width='2' height='1' x='2' y='0' fill='rgb(44,7,15)'></rect>
<rect width='3' height='1' x='3' y='0' fill='rgb(49,3,14)'></rect>
<rect width='4' height='1' x='4' y='0' fill='rgb(55,1,15)'></rect>
<rect width='5' height='1' x='5' y='0' fill='rgb(61,0,16)'></rect>

下面我先说下如何做：

首先，大家应该知道所有图片都是有RGB像素值进行合成显示的，这样我们就可以利用JS技术，获取图片的像素点RGB值，，如RGB值的一维数组，然后通过把RGB数组值遍历循环生成以上的SVG和rect组成的数据文档，或者SVG和article等其他标签；通过JS里面的Ajax获取该文件的内容，赋值给指定的div，然后浏览器就可以浏览图片了

有的人可能会说，这样和<img>访问有什么区别，首先我说缺点：

1.生成这样格式后文档大小会变大，而且会变得比原来大很多倍，大大影响加载速度

2.加载图片会像印刷机一样一行一行像素地加载显示，有点慢，对网速要求高

为什么要这样做？

主要功能是为了干扰部分广告拦截插件，让其误认为是内容，而不是直接<img>图片被屏蔽干掉！

更大作用，让你了解图片的合成原理，也是各大数码相机图片显示优化的核心内容，优化就是优化图片的像素，通过代码让其相似的像素点集中，可以等比例缩小或者放大图片的像素进行算法优化，使其图片更加平和不失真！

同时，还可以去识别图片中文字，数字等；不出意外阿里云系统图片检查是否合规也是利用此技术，分析图片中像素点聚集是否含有组成违禁词等；还有一些验证码识别技术等等，技术思路都是差不多，就是看你怎么利用了。

如何做到上述功能，得利用canvas技术，获取图片的像素值内容，正常获取到的是四通道像素值，然后去除一个不必要的通道像素（通常去除A通道），就留下RGB通道值，这样就可以了，具体方法可以参考网络上一些作者写的函数，原理过程我上述已经描述过，按照此过程就可以达到您想要的目的图片，其中就涉及一些方法功能函数，需要懂JS代码的程序员去搞了。稍微难点的就是遍历循环生成文件了，这个其实也简单，遍历循环时按照图片宽度和高度去写换行判断函数，这样您的思想是不是豁然开朗了，呵呵