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

Question

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

我觉得这是不可能的,但有人不同意吗？如何才能做到这一点？

C

Answer 1

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

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

或类似的东西...

在Chrome,Firefox,IE11,Edge,Safari
Safari返回false和IE11上测试了上面虽然有表情符号但没有返回颜色true.

编辑:
Amy在评论部分注意到 Modernizr已经检测到表情符号 - 所以你也可以给它一个去

Answer 2

旗帜表情符号对于此处发布的答案来说有点边缘情况。因为如果设备不支持标志表情符号，则会呈现国家/地区代码的回退。例如，英国国旗 () 将变为 -> GB。

Windows 10 不支持表情符号标志。

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

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