开发 网站表情emoji优化

· 发布于 8个月前 · 367 次阅读
本帖最后由 阳 于 2018-11-06 08:21:17 编辑。

由于表情是单个的图片,点击表情选择框时一瞬间产生几十个 http 请求,这应该会给服务器产生压力。

解决办法有很多:

  1. 将所有表情合并到一个图片,并配合 CSS 来实现。

我等业余程序员对 CSS 不是很精通,这个办法应该很好,我还没有实现。

  1. 花钱解决,使用 CDN 加速。

  2. 将表情转为 Base64 字符串,打包到 javascript 中

我是按第 3 中方法实现的:

网上搜索 js图片转base64 很多都是根据图片 URL 获取图片后在转为 base64,有的还要 JQuery 没有想要的结果。

例如这样的方法

    function imageToBase64(url, callback, outputFormat){
       var canvas = document.createElement('CANVAS'),
      ctx = canvas.getContext('2d'),
      img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function(){
          canvas.height = img.height;
          canvas.width = img.width;
          ctx.drawImage(img,0,0);
          var dataURL = canvas.toDataURL(outputFormat || 'image/png');
          callback.call(this, dataURL);
          canvas = null; 
        };
     img.src = url;
    } 

这些根本不能解决我的需求,我这里贴出我的方案。

假如我的表情目录为 ./path/to/smilies, emoji 图片文件名称格式为 icon_emoji.png

创建一个 js 文件 image2Base64.js

const fs = require('fs')
const path = require('path')
const mineType = require('mime-types')

function image2Base64 (filepath) {
    let data = fs.readFileSync(filepath)
    data = new Buffer(data).toString('base64')
    return 'data:' + mineType.lookup(filepath) + ';base64,' + data
}

function createBase64(smiliesPath) {
    smiliesPath = path.resolve(smiliesPath)

    let regexp = /^icon_(.+)\.(?:gif|jpe?g|png)$/

    const files = fs.readdirSync(smiliesPath)

    const emojiMap = {}

    files.forEach(function (filename) {
        let filepath = path.join(smiliesPath, filename)
        let stats = fs.statSync(filepath)
        if (stats.isFile()) {
            const result = filename.match(regexp)
            if (result) {
                let emojiCode = result[1]
                emojiMap[emojiCode] = image2Base64(filepath)
            }
        }
    })

    fs.writeFileSync(path.resolve('./emojis.json'), JSON.stringify(emojiMap))
}

createBase64('./path/to/smilies')

控制台执行 node image2Base64.js 生成转化好的 smilies.json 文件

> node image2Base64.js

然后 修改下 我的解析表情包 emoji -- js 实现

class Emoji {
    constructor () {
        this.emojiMap = require('./emojis.json')
        this.regexp = new RegExp(':(' + Object.keys(this.emojiMap).join('|') + '):', 'g')
    }

    trans (text) {
        text = text.replace(this.regexp, (match, code) => {
            return `<img alt="${code}" class="wp-smiley" src="${this.emojiMap[code]}">`
        })

        return text
    }
}

export default new Emoji()

:neutral:

共收到 0 条回复
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册