2017-04-26 11 views
6

私が作業しているプロジェクトでは、絵文字(理想的にはApple絵文字)から画像ファイルを生成する必要があります。私はそれがかなり簡単なことだと思っていましたが、私が使用する各ツールでは、結局私は壁にぶつかりました。Node.jsのPNGまたはJPGへの絵文字 - どのように?

私は、必要に応じて照会できるthis oneのような絵文字セットの使用も検討しました。残念ながら、私がリンクしてきたものには、avocado()shrimp()やharambe()などのUnicode 9.0絵文字はありません。あなたはそのような最新のセットを知っていますか?

私はopentype.jsを試しましたが、私のmac(Apple Color Emoji.ttc)の絵文字フォントの拡張子である.ttcフォントはサポートしていません。私は.TTFするフォントを変換しましたが、それはどちらか動作しませんでした:

var opentype = require('opentype.js'); 
    opentype.load('./build_scripts/apple_color_emoji.ttf', function (err, font) { 
     if (err) { 
      alert('Could not load font: ' + err); 
     } else { 
      console.log("loaded the font",font); 

      var Canvas = require('canvas') 
      , Image = Canvas.Image 
      , canvas = new Canvas(200, 200) 
      , ctx = canvas.getContext('2d'); 
      var path = font.getPath('', 0, 150, 72); 
      path.draw(ctx); 
      console.log('<img src="' + canvas.toDataURL() + '" />'); 
     } 
    }); 

結果は以下のようになります。私がすることになっているfontkitを、試してみた

The result looks like this:

.ttcファイルを読み取ることができますが、Apple Color Emojiフォントを使用しようとするとエラーが発生します。私はいくつかの間違ったSVGで終わる私の変換後の.ttfファイルと同じことをしようとした場合

var fontkit = require('fontkit'); 
    var font = fontkit.openSync('./build_scripts/Apple Color Emoji.ttc'); 
    // TypeError: font.layout is not a function 

var fontkit = require('fontkit'); 
    var font = fontkit.openSync('./build_scripts/apple_color_emoji.ttf'); 
    var run = font.layout(''); 
    var svg = run.glyphs[0].path.toSVG(); 

    console.log(svg); 
    // M-1 0ZM799 800Z 

私の質問は、私もこれは正しい方法で近づいていますか?私のマシン上にすでにある絵文字を.pngや他の形式に変換するのは、かなり簡単なはずですが、動作させることができません。

EDIT:

私はthis reporodrigopoloに大きなshoutouts)で彼らの16進コードによって絵文字名のリストを見つけました。今、私は単にこれを使用することができます。

var emoji = "".codePointAt(0).toString(16); //1f60a 
var emojiFile = fs.readFileSync('./my-emoji-folder/' + emoji + '.png'); 

それでも、誰かがこの問題のコーディングソリューションを持っているかどうかを知るために素晴らしいことです!

FURTHER EDIT:

は、私が唯一のUnicode 8.0ではなく、ユニコード9.0に絵文字を含ま見つけた最初のソリューションをオンにします。私はemoji抽出を行うルビーの宝物gemojiを見つけました。あなたはルビーの開発者(私はありません)していない場合は、あなたは、単にあなたのシェルで次のコマンドを使用することができます。

git clone https://github.com/github/gemoji.git 
cd gemoji 
bundle install 
bundle exec gemoji extract some-directory/emoji 

を今、あなたのいくつかのディレクトリ/絵文字フォルダにユニコード9.0絵文字を持っています!

+0

これは非常に難解な問題(+1)のようです。好奇心の理由から、正確に絵文字からイメージを作成する必要があるのはなぜですか? – Dragomok

+1

ハァッ、ええ、なぜ私は解決策を見つけるのに苦労したのかもしれません。私は別の.envファイルでビルドしてウェブサイトの外観を変えることができる反応プロジェクトを試しています。私はfaviconを絵文字にすることを決めたので、.envで指定された絵文字に応じてそれらを動的に生成する方法が必要でした。しかし、より日常的な使用のために、あなたはそれをまだサポートしていないデバイス上に最新の絵文字を表示するために使用することができます。 – user2634633

+1

フォントキットはTTCをサポートしていると誰ですか?それは絶対にしないので。あなたのTTCを*実際の*フォントファイルに解凍し、代わりにそれらを画像生成に使用してください。また、解決策が見つかった場合は、それを「編集」として追加しないで、回答を書いてから1日後にそれを受け入れます。答えのない質問は、Googleのインデックスを作成するのではなく、時間を失うことになります。 –

答えて

3

フォントコレクションからフォントを選択することで、これをフォントキットで動作させることができました。私は "Apple Color Emoji.ttc"に含まれているTTFのいずれかを使用すると異なる結果が得られるケースはまだ見つけていません。

const fs = require('fs'); 
const fontkit = require('fontkit'); 
const emoji = require('node-emoji'); 
const font = fontkit.openSync('./Apple Color Emoji.ttc').fonts[0]; 

let emo = emoji.get('100'); 
let run = font.layout(emo); 
let glyph = run.glyphs[0].getImageForSize(128) 

fs.writeFileSync('100.png', glyph.data); 
+0

まさに私が探していたもの!私は単純化のために 'node-emoji'依存関係を削除します:' let run = font.layout( ''); '。 – user2634633

+0

また、 'getImageForSize'関数が絵文字イメージをピクセル単位で取得することを覚えておいてください.Apple Color Emojiの最大サイズは160です。 – thebenmiller

関連する問題