把js源代碼壓縮成一個ascii字符畫的源代碼的工具:js2image

jopen 8年前發布 | 12K 次閱讀 js2image JavaScript開發

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

在Node.js中使用

執行以下命令安裝模塊:

$ npm install js2image --save

使用方法:

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);
});

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

項目地址: https://github.com/xinyu198736/js2image

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!