基于JS2Image实现圣诞树代码

圣诞节快到了。作为一个程，我觉得有必要展示一下他独特的节日风格，在朋友圈发一张自己祝福的照片。你不这么认为吗？

说到圣诞节，有一个关于程和圣诞节关系的笑话：

问：为什么程序员总是把万圣节和圣诞节混为一谈？

a:因为10月31日==12月25日！

停下来！停下来！

先别笑，我们先冷静一下。

面对圣诞节不得不加班的程，让我们舒缓一下沉闷的心情，充分发挥我们独特的艺术细胞。是时候装逼了。

让我们展示一个带有IDE工具的圣诞树。没有圣诞老人，没有圣诞礼物，我们有一棵圣诞树。

看，它出来了。这不是一棵树，这是一个肿块。

所有的js代码都堆在树上。

密钥自动生成！

这是怎么回事？搞什么？

下面和大家分享一下：

首先，这不是边肖的原创。在此之前，有一位大神创造了这个工具，叫做js2image。

2 js2image是一个可以将js源代码压缩成ascii字符绘图源代码的工具。它的特点是压缩后的代码仍然可以运行，而不是简单地拼写最终的模式。

安装了node和npm的童鞋可以直接使用以下命令安装js2image:

安装后执行命令：

小路。/resource/jquery.js是压缩js的文件路径。

执行该命令后，将生成一个位于xmas.js末尾的文件。当你打开它，你可以看到每一棵圣诞树。

其他安装方法见：

Github地址：https://github.com/xinyu198736/js2image.

在线翻译地址：http://f2e.souche.com/cheniu/js2image.html.

据说99%的压缩代码都能正常运行。

哈哈，感兴趣的童鞋可以试试。

让我们今年和圣诞树(或代号)一起过圣诞节吧~

PS: js的新形象()。

创建图像对象：var a=new Image()；定义Image对象的src : a . src=" XXX . gif "；这样做相当于为浏览器缓存一张图片。

图像对象：

建立图像对象：图像对象名称=新图像([宽度]，[高度])。

图像属性：边框完整高度hspace lowsrc名称src vspace宽度。

图像事件：加载时按下按键时出错时中止。

注意：src属性必须在onload后写，否则程序会在IE中出错。

参考代码：

var img=new Image()；img . onload=function(){ alert(' img已加载')}；img . onerror=function(){ alert(' error！')};img . src=' http :http://www . abao net.com/img . gif '；函数show(){alert('body已加载')；};window.onload=show运行以上代码后，我们在不同的浏览器中进行了测试，发现IE和FF是不一样的。在FF中，img对象的加载包含在正文中。

在加载过程中，主体被认为是在img加载后被加载的，这触发了window.onload事件。

在IE中，img对象的加载不包含在body的加载过程中。当主体被加载并且window.onload事件被触发时，img。

可能对象还没有加载完毕，window.onload后会触发img.onload事件.

根据以上问题，考虑到浏览器的兼容性和网页的加载时间，尽量不要在Image对象中放太多图片，否则会在FF下。

会影响网页的下载速度。当然，如果你在window.onload之后执行预加载功能，FF就不会有问题了。

您可以通过图像对象的完整属性(每个图像对象都有一个完整属性，并且当图像位于。

在加载过程中，属性值为false，当onload、onerror、onabort中的任意一个发生时，意味着图像加载过程结束(无论如何。

不成功)，当完整属性为真时)

var img=new Image()；img.src=oImg[0].src=this.src.replace(/small/，' big ')；奥迪夫。风格。display=' blockimg.complete？奥迪夫。风格。display=' none ' :(oImg[0]).onload=function(){ odiv。风格。display=' none ' })注：

工程师协会火狐等大众浏览器均支持图像对象的装载事件。

ie8及以下、歌剧不支持onerror事件