web-dev-qa-db-ja.com

JavaScriptで絵文字のレンダリングサポートを検出するにはどうすればよいですか？

サイトに絵文字を追加したいのですが、プラットフォームでサポートされていない場合は、小さな四角を表示するのではなく、絵文字を非表示にします。

これは不可能だと思いますが、反対する人はいますか？これはどのように行うことができますか？

C

javascriptemoji
6
Connor Gurney

国旗の絵文字は、ここに投稿された回答に対するちょっとしたエッジケースです。旗の絵文字がデバイスでサポートされていない場合は、代わりに国コードのフォールバックがレンダリングされます。例えば。ユニオンジャックフラグ（????????）は-> GBになります。

Windows10は絵文字フラグをサポートしていません。

このスクリプトは、既存の回答と同様の方法を使用しますが、代わりに、キャンバスがグレースケールであるかどうかを確認します。キャンバスに色がある場合は、絵文字がレンダリングされたことがわかります。

 function supportsFlagEmoji () {
    var canvas = document.createElement("canvas");
    canvas.height = 10;
    canvas.width = canvas.height*2;
    var ctx = canvas.getContext("2d");
    ctx.font = canvas.height+"px Arial";
    ctx.fillText("????????", 0, canvas.height);
    var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    var i = 0;
    while(i<data.length) {
        if (data[i] !== data[i+1] || data[i] !== data[i+2]) return true;
        i+=4;
    }
    return false;
}
1
pureth

誰かがライブラリを探している場合は、ここにあります if-emoji 。それはロコが彼の答えで使用したのと同じアプローチを使用します。

0
Hitesh Kumar