• Stars
    star
    1,533
  • Rank 30,520 (Top 0.7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 9 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

一个可以把js源代码压缩成一个ascii字符画的源代码的工具,压缩后的代码仍可运行 (A tool can compress JavaScript code to any ascii image and still run normally )

Thanks to Souche Inc. which provides the server to hold an online service.

Souche Inc.

ENGLISH DOC :click me

EN summary: a Tool that can compress js source code to any ascii image,after that the result code can still run normal

**警告:压缩后的js请人工确认后再投入生产使用,不保证100%可运行,目前测试的js以及souche.com官网的js都已经试验过,基本可以保证99%的js压缩后没有问题

who am i?

js2image 是一个可以把js源代码压缩成一个ascii字符画的源代码的工具,它的特色是压缩后的代码仍可运行,而不是简单的拼成最终的图案。

关于js2image的原理可以见我写的这篇详解文章:圣诞节,把网站所有的js代码都压缩成圣诞树吧。

压缩后的示例,亲测可用

http://f2e.souche.com/assets/js/lib/jquery-2.1.1.min.xmas.js

另外,本项目resource目录中有多个已经跑通过的测试库文件。

压缩效果如下:

js2image压缩效果图

安装依赖的系统模块 graphicsmagick

# Ubuntu
$ sudo apt-get install graphicsmagick

# Fedora
$ sudo dnf install GraphicsMagick

# OS X
$ brew install graphicsmagick

# Chocolatey (package manager for Windows)
# (Restart of cmd/PowerShell is required)
$ choco install graphicsmagick

命令行工具使用方法

执行以下命令安装全局命令:

$ npm install js2image -g

使用方法:

# 直接在命令行里执行此命令即可压缩,默认压缩出一个xmas.js后缀的文件。
# -s 源代码路径 必须的参数!
# -r 是否反相图像 可省
# -i 指定使用的图片的路径,默认使用 ./resource/tree.png 可省

$ js2image -s ./resource/jquery.js

# 新增支持打包一个文件夹内所有js文件,慎用!不保证打包后的js100%运行正常,请经过人工测试确认。
$ js2image -s ./resource

$ js2image -s ./resource/jquery.js -i ./resource/tree.png

注意

  • 图片需要是白底的,不能是透明的
  • 不支持 windows 系统

在Node.js中使用

执行以下命令安装模块:

$ npm install js2image --save

使用方法(见 example/test.js ):

var Js2Image = require('js2image');

var image = './resource/tree.png';
var source = './resource/jquery.js';
var target = './target/xmas.js';
var options = {};

// 获取结果的code
var sourceCode = fs.readFileSync(source);
Js2Image.getCode(sourceCode, image, options).then(function (code) {
  // code为生成的代码
  console.log(code);
})

// 或者直接写入文件
Js2Image.writeToFile(source, image, target, options).then(function (code) {
  // 生成的代码已被写入到文件target
  // code为生成的代码
  console.log(code);
});

关于 options 可用值(可以调节像素等参数):

Size Options:

- `pxWidth` (Number): The pixel width used for aspect ratio (default: `2`).
- `size` (Object): The size of the result image (ASCII art)—interpreted by
  [`compute-size`](https://github.com/IonicaBizau/compute-size):
  - `height` (Number|String): The height value (default: `"100%"`).
  - `width` (Number|String): The width value (default: computed value to
     keep aspect ratio). This is optional if the height is provided.
- `size_options` (Object): The options for
  [`compute-size`](https://github.com/IonicaBizau/compute-size):
  - `screen_size` (Object): The screen size (defaults to terminal width
  and height):
      - `width` (Number): The screen width.
      - `height` (Number): The screen height.
  - `px_size` (Object): The pixel size.
      - `width` (default: `1`)
      - `height` (default: `1`)
  - `preserve_aspect_ratio` (Boolean): If `false`, the aspect ratio will
    not be preserved (default: `true`).
  - `fit_screen` (Boolean): If `false`, the result size will not fit to
    screen (default: `true`).

Matrix asciifier options:

- `stringify` (Boolean): If `false`, the pixel objects will not be
  stringified.
- `concat` (Boolean): If `false`, the pixel objects will not be joined
  together.

Pixel asciifier options:

- `pixels` (Array|String): An array or string containing the characters
   used for converting the pixels in strings
   (default: `" .,:;i1tfLCG08@"`).
- `reverse` (Boolean): If `true`, the pixels will be reversed creating a
   *negative image* effect (default: `false`).
- `colored` (Boolean): If `true`, the output will contain ANSI styles
  (default: `true`).
- `bg` (Boolean): If `true`, the **background** color will be used for
  coloring (default: false).
- `fg` (Boolean): If `true`, the **foreground** color will be used for
  coloring (default: true).
- `white_bg` (Boolean): Turn on the white background for transparent
  pixels (default: `true`).
- `px_background` (Object): An object containing the `r` (red), `g`
  (green) and `b` (blue) values of the custom background color.

Other options:

- `image_type` (String): Use this to explicitely provide the image type.
- `stringify_fn` (Function): A function getting the `pixels` matrix and
  the `options` in the arguments. Use this option to implement your own
  stringifier.

#others

有网友反馈某些电脑上会报错,还没搞清楚情况.

onverting ./resource/release.js
[Error: Could not execute GraphicsMagick/ImageMagick: gm "identify" "-ping" "-format" "%wx%h" "/usr/local/lib/node_modules/js2image/resource/tree.png" 
this most likely means the gm/convert binaries can't be found]
/usr/local/lib/node_modules/js2image/utils/image-to-struct.js:19
      var content = converted.replace(/\S\[0m/g,"").replace(/\n/g,"\",\n\"");
                             ^

TypeError: Cannot read property 'replace' of undefined

如遇此种情况,执行以下命令即可,至于是为毛,我也没搞清楚.

npm install -g replace

More Repositories

1

sketch-to-html

从 sketch 转换成 html,已无更新。。
JavaScript
681
star
2

antd-visual-editor

ant-design 组件库实时可视化编辑器,实时生成 react 代码
JavaScript
572
star
3

Rabbit.js

一个烂尾项目,仅供吐槽
JavaScript
236
star
4

wechat-ai-summarize-bot

微信群聊总结助手 Nodejs 版
TypeScript
140
star
5

arduino-aliyun-iot-sdk

运行于 arduino 的 阿里云 IoT 接入 SDK,在底层连接的基础上增加数据回调绑定、发送数据和事件等 api 的封装,免去自己解析数据的痛苦
C++
131
star
6

s-mobx

轻量级mobx实现,仅供参考
JavaScript
125
star
7

eslint-plugin-996

a eslint plugin save you from 996
JavaScript
108
star
8

colors-web

自由/简单地让浏览器的console变的五彩斑斓。chalk or colors like library, use in browser console , with any colors
TypeScript
60
star
9

hancode

把你的JS代码翻译成中文书写的代码,并且可执行
JavaScript
41
star
10

qiaowei

社交网络辅助工具,企业用户和个人用户均可。致力于灵活解放生产力,而不是病毒营销。
JavaScript
28
star
11

my-public-share-keys

这些年来公开分享的一些文档整理,持续更新
28
star
12

nestjs-prisma-example

around nestjs, with prisma and some graphql lib,write less code,create power api
TypeScript
26
star
13

eth-self-token-example

在本地网络发布一个名叫 YuTou 的 token
TypeScript
18
star
14

Neon-work-clock

在新的标签页中显示一个漂亮的显示工作状态和时间的霓虹灯界面,可以控制是否在工作中,并统计工作时间等
HTML
15
star
15

xmind-to-ascii

transelate xmind to ascii structure
GCC Machine Description
15
star
16

gitlab-code-report

自动爬取gitlab,生成代码提交,代码变更行数,mr,issues 数据和排行
JavaScript
13
star
17

node-renren

nodejs版人人网oauth认证和api sdk
JavaScript
12
star
18

node-taobao

taobao api的nodejs sdk
JavaScript
11
star
19

frontend-modern-experience-share-slide

一个关于Web 体验技术发展前沿的小分享
Vue
10
star
20

kuihuabaodian

葵花宝典,不解释
JavaScript
10
star
21

auto_create_sequelize_models

this repo can auto create sequelize models from exist mysql.
CoffeeScript
8
star
22

hotconfig

hot config for nodejs
CoffeeScript
7
star
23

node-weibov2

基于node-weibo-v2改进的node平台微博v2接口sdk
JavaScript
7
star
24

CHKeychain

a tool to read and write info to ios keychain
Objective-C
7
star
25

beian.js

模拟代码中字符串备案的情形
JavaScript
7
star
26

queue_do

异步队列同步化,支持递归嵌套
JavaScript
7
star
27

koa-auto-controller

auto generate controller by folder struct for koa
JavaScript
6
star
28

mwc_control

用arduino输出pwm信号控制mwc飞控
Arduino
5
star
29

htmljs

the code for www.html-js.com 前端乱炖 in Age of Freedom
JavaScript
5
star
30

yaninput-plugin

可以任意嵌入App的颜文字输入法插件,一句话即可集成颜文字输入功能到自己的App中。
Objective-C
4
star
31

node-douban

豆瓣的nodejs实现的SDK
JavaScript
4
star
32

webpack-browserify-babel-rollup-example

这是一个示例项目,展示babel,browerify,webpack,rollup四者的基本用法,以及四者编译后的结果,可以借此了解这四个玩意到底是干了些什么事情。
JavaScript
4
star
33

walk_do

遍历文件夹并处理所得文件,支持同步遍历和异步遍历,同步遍历顺序严格使用深度搜索算法
JavaScript
4
star
34

my-booklist

我的书单,欢迎杭州的学生借阅。
3
star
35

animate-num

up to num with animate
JavaScript
3
star
36

fastdemo

make fast demo env use nodejs
JavaScript
3
star
37

mobiview

view or share your site with mobile style
TypeScript
3
star
38

eslint-plugin-kfc-crazy

a lint for KFC Crazy Thursday
JavaScript
3
star
39

readOnlineFile

读取远程图片或者文件并存储到本地
JavaScript
3
star
40

node-tqq

nodejs版腾讯api sdk
JavaScript
3
star
41

formatjson

format json
JavaScript
2
star
42

wp-pc-wallpaper

Wonderpal NFT PC Wallpaper generator
TypeScript
2
star
43

authorize

国内各大微博的authorize链接生成方法集合。原理基本一样,稍有差别。
JavaScript
2
star
44

fly_control_ios

蓝牙控制四轴的客户端程序
Objective-C
1
star
45

cpu-overload-monitor

display cpu overload status in terminal
JavaScript
1
star
46

s-ioc

这是一个试验项目,主要是学习下如何实现 ioc 模式
TypeScript
1
star
47

somethingfrom2009

从学习前端来瞎写的各种乱七八糟的东西。
JavaScript
1
star
48

the-most-beautiful-html-construction

the most beautiful html construction
1
star
49

changelog-clog

JavaScript
1
star
50

sns-error-info

整理各SNS平台的错误码所对应的英文和中文描述,可自己扩展,方便在应用中错误提示,也可以当做手册查询
JavaScript
1
star
51

tap-plus-one

一个 arduino 程序,点一次加一,传说程序员通过这个装置来记录每天被骚扰的次数
Arduino
1
star
52

htmljs-publish-atom

一个atom编辑器的插件,直接把markdown文件发送到前端乱炖(www.html-js.com)网站的专栏。
CoffeeScript
1
star