TransparentLC / WechatMomentScreenshot

朋友圈转发截图生成工具(⚠️Fork 不是收藏,请勿在贡献代码以外的情况下 Fork!)
https://git.io/WMS
GNU Affero General Public License v3.0
3.91k stars 542 forks source link

更新表情 #73

Closed itsHenry35 closed 1 year ago

itsHenry35 commented 1 year ago

网站的表情实在版本太旧,且没有微信新加上的表情,部分时候可能因这点来拒绝生成的截图 微信官方有不限制access origin的表情文件:sprite.png,以spritesheet的形式存放,可以通过这种方法来渲染这种表情文件

TransparentLC commented 1 year ago

好主意!

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

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

TransparentLC commented 1 year ago

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

TransparentLC commented 1 year ago

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

itsHenry35 commented 1 year ago

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

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

itsHenry35 commented 1 year ago

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

itsHenry35 commented 1 year ago

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

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

TransparentLC commented 1 year ago

转义是因为 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 是重复的,去重之后我就可以合并了!

itsHenry35 commented 1 year ago

转义是因为 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了,您再看看吧。

TransparentLC commented 1 year ago

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

itsHenry35 commented 1 year ago

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

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