如何在JavaScript中检测表情符号的渲染支持？

Question

我想在我的网站上添加表情符号，但如果他们在平台上不受支持则隐藏它们，而不是显示小方块。

我觉得这是不可能的，但有人不同意吗？怎么办呢？

C

Answer 1

尝试将字体（在表情符号范围内）绘制到canvas并使用getImageData读取像素。如果您感兴趣的像素的Alpha通道data[3]不是透明的（例如在center的中心），那么可能是表情符号

＆＃13;

＆＃13;

function supportsEmoji () {
  var ctx = document.createElement("canvas").getContext("2d");
  ctx.fillText("", -2, 4);
  return ctx.getImageData(0, 0, 1, 1).data[3] > 0; // Not a transparent pixel
}

console.log( supportsEmoji() );

＆＃13;

＆＃13;

＆＃13;

或类似的......

在Chrome，Firefox，IE11，Edge，Safari中

经过测试 以上内容 Safari返回false和IE11虽然有表情符号但没有返回颜色true。

<小时/> 的 编辑：
艾米在comments部分中注意到Modernizr有detection表情符号 - 所以你也可以给它一个去

Answer 2

标志emoji表情对于此处发布的答案来说有点偏僻。由于如果设备上不支持标志表情符号，则将显示国家/地区代码的后备内容。例如。英国国旗标志（??）将变为-> GB。

Windows 10不支持Emoji标志。

此脚本使用与现有答案类似的方法，但是将检查画布是否为灰度。如果画布上有颜色，我们就知道已经渲染了表情符号。

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

Answer 3

如果有人在寻找图书馆，那么这里就是if-emoji。它使用了Roko在回答中使用的相同方法。

Answer 4

接受的答案不适用于我的系统（Windows 10/chrome）。对于不受支持的字形，它返回 true，对于不覆盖中心像素但实际上已呈现 (☹) 的表情符号，它似乎不准确。

我的系统绘制的不受支持的字形（似乎可以互换）是： 和 。当然第一个的中心像素是不透明的，也许这就是原因。

另一种方法是将不受支持的字形绘制到画布中（您可以使用 \uFFFF 保证非字符，请参阅 https://en.wikipedia.org/wiki/Specials_(Unicode_block)），然后“校验和”或实际上只是对 { 的结果求和{1}}，然后根据这些数字检查您的表情符号。这样您就不会依赖于字形的实现，只要系统显示“未找到”符号。 Firefox 似乎显示不受支持的表情符号的唯一十六进制代码，因此此方法不适用于该浏览器或类似配置。

第二种更准确但在我的使用中慢得多的方法是使用 getImageData() 进行比较：

我在运行所有三种方法的片段测试中也包含了“双重不受支持”的表情符号。作为记录，我现在正在使用整个集合在 CodePen 上的 demo 中使用“rgb sum”方法，并且它不会错误地过滤掉任何内容。

toDataURL()