Giter Club home page Giter Club logo

Comments (10)

itsHenry35 avatar itsHenry35 commented on July 28, 2024 1

我去parse了一下这个json之后PR了,但是我并没有去支持key检索,因为我发现加上那个key之后里面一堆转义字符有各种各样奇奇怪怪的毛病,然后感觉也没必要,就算了 #74

Preview: https://wechat-moment-screenshot-git-devprev-itshenry35.vercel.app

from wechatmomentscreenshot.

TransparentLC avatar TransparentLC commented on July 28, 2024

好主意!

这个 spritesheet 我不打算直接拿过来使用,主要原因是 464 KB 的话太大了。图片里一共有 148 个 128px 的表情,试了一下在手机上显示出来的尺寸是 48px,缩放到这个尺寸再使用 tinypng 压缩的话就是 112 KB,这个大小勉强可以接受……想要继续减小的话倒是可以把使用频率最高的 1-20、21-40……个表情各保存为一个 spritesheet,然而我没有统计数据(摊手)

另外一个比较麻烦的是需要重新整理一遍表情图片和文本的对应关系(比如 README 里写的,[再见][再見][Bye] 对应哪个图片,在 spritesheet 中是第几个表情需要偏移多少像素),不知道有没有现成的资料,总之更新这个需要等待一段时间(摊手)

from wechatmomentscreenshot.

TransparentLC avatar TransparentLC commented on July 28, 2024

搜索了一下,https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.3.13/assets/Expression/Expression_**@2x.png 这个地址是单独的表情图片。** 的范围是 1-105,不过比前面的 spritesheet 的 148 个少了一些。

from wechatmomentscreenshot.

TransparentLC avatar TransparentLC commented on July 28, 2024

@itsHenry35 有个问题是,这个 spritesheet 是在哪个页面上出现的?说不定那里有和表情文本以及坐标相关的东西。

from wechatmomentscreenshot.

itsHenry35 avatar itsHenry35 commented on July 28, 2024

@itsHenry35 有个问题是,这个 spritesheet 是在哪个页面上出现的?说不定那里有和表情文本以及坐标相关的东西。

还真的有欸!所有微信公众号的文章都是有的,以前都是通过加载整个spritesheet的,我看了看现在就是像你说的加载单独表情图片了,我稍微把json格式化了一下,打拉个包,您看看,我附在下面了
reference.zip

from wechatmomentscreenshot.

itsHenry35 avatar itsHenry35 commented on July 28, 2024

我去parse了一下这个json之后PR了,但是我并没有去支持key检索,因为我发现加上那个key之后里面一堆转义字符有各种各样奇奇怪怪的毛病,然后感觉也没必要,就算了 #74

from wechatmomentscreenshot.

TransparentLC avatar TransparentLC commented on July 28, 2024

转义是因为 JS 的特性,在字符串里使用 replace 的时候关键词用的是正则表达式,否则只会替换掉第一次出现关键词的地方。

//替换表情文字和换行符为对应的HTML标签
function emoticonReplace(text) {
    text = text.replace(/\r?\n/g, '<br>');
    for (var i = 0; i < emoticon.length; i++) {
        text = text.replace(new RegExp(emoticon[i].name, 'g'), '<img class="emoticon" src="' + emoticon[i].URL + '">');
    }
    return text;
}

看了一眼 JSON 发现很多 name 是重复的,去重之后我就可以合并了!

from wechatmomentscreenshot.

itsHenry35 avatar itsHenry35 commented on July 28, 2024

转义是因为 JS 的特性,在字符串里使用 replace 的时候关键词用的是正则表达式,否则只会替换掉第一次出现关键词的地方。

//替换表情文字和换行符为对应的HTML标签
function emoticonReplace(text) {
    text = text.replace(/\r?\n/g, '<br>');
    for (var i = 0; i < emoticon.length; i++) {
        text = text.replace(new RegExp(emoticon[i].name, 'g'), '<img class="emoticon" src="' + emoticon[i].URL + '">');
    }
    return text;
}

看了一眼 JSON 发现很多 name 是重复的,去重之后我就可以合并了!

ok我去重之后push了,您再看看吧。

from wechatmomentscreenshot.

TransparentLC avatar TransparentLC commented on July 28, 2024

jsdelivr 有缓存,修改之后的 emoticon.json 也许需要过一段时间才会生效。

from wechatmomentscreenshot.

itsHenry35 avatar itsHenry35 commented on July 28, 2024

jsdelivr 有缓存,修改之后的 emoticon.json 也许需要过一段时间才会生效。

嗯,我去purge cache了,但貌似还是还是没有生效,那就等等吧

from wechatmomentscreenshot.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.