---
url: https://sugarat.top/weekly/2024-03-17.md
description: >-
  ① UPNG.js - 纯前端实现PNG图片压缩 ② 视频：Deno 团队介绍 JSR，涵盖了主要动机和功能 ③ 摸头杀生成 ④ fig 团队加入亚马逊 ⑤
  fx - 终端中友好的处理JSON ⑥ cmdk - 命令行式的React菜单组件 ⑦ Chat Nio - 下一代 AI 一站式解决方案 ⑧
  StickerBaker - 个性化贴纸生成工具
---

# 视野修炼第77期 | JSR 的愿景

欢迎来到第 77 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

\[\[toc]]

**​也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）**

下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**。

## 🔥强烈推荐

### [1. UPNG.js](https://mp.weixin.qq.com/s?__biz=MzA4ODMyMTk5OA%3D%3D\&mid=2247485758\&idx=1\&sn=e260e5e1075a03609288ba3142238deb\&chksm=902ab39fa75d3a896c8b1f3e2a479d42be597bb517a8e0e80921dff7063a56f7c1a2943c09d5\&token=2137395319\&lang=zh_CN#rd) - 纯前端实现PNG图片压缩

一个轻量且极速的 `PNG/APNG` 编码和解码库，[Photopea](https://www.photopea.com/) 图像编辑器的主要 `PNG` 引擎。

引入后简单几行代码调用即可实现 PNG 图片压缩。

```ts
import UPNG from 'upng-js'

async function compressPNG(file: File) {
  const arrayBuffer = await file.arrayBuffer()
  const decoded = UPNG.decode(arrayBuffer)
  const rgba8 = UPNG.toRGBA8(decoded)

  // 关键的压缩方法
  // 这里 保持宽高不变，保持80%的质量（接近于 tinypng 的压缩效果）
  const compressed = UPNG.encode(
    rgba8,
    decoded.width,
    decoded.height,
    256 * 0.8
  )
  return new File([compressed], file.name, { type: 'image/png' })
}
```

压缩效果接近于 [tinypng](https://tinypng.com/) 。

### [2. 视频：Deno 团队介绍 JSR，涵盖了主要动机和功能](https://www.youtube.com/watch?v=gOfOSRertMA)

现状：npm包

* 将编写的 `TS` 转为 `JS`
* 编译产物包含 `CJS` 和 `ESM` 两种
* 生成 `d.ts` 定义文件
* 创建文档站介绍使用

![](https://img.cdn.sugarat.top/mdImg/sugar/48dcf62a634b042c76e4053550173f0c)

为了简化整个流程提出了 JSR 这个替代方案。

JSR 的一些特性：`原生TS 支持`, `仅支持 ESM`, `运行时无关`, `npm 超集`, `JSDoc 注释自动生成文档`。

### [3. 摸头杀生成](https://toolwa.com/petpet/)

![](https://img.cdn.sugarat.top/mdImg/sugar/2f93d6ec2f8098d7a338f22043df7534)

使用非常简单

![](https://img.cdn.sugarat.top/mdImg/sugar/7a24901b271e18566c20be77b9609a93)

GIF 图片合成使用 [gif.js](https://github.com/jnordberg/gif.js)

## 🔧开源工具&技术资讯

### [4. fig 团队加入亚马逊](https://fig.io/)

产品将在 9月1日 停止服务，推荐用户迁移到 [CodeWhisperer](https://aws.amazon.com/cn/codewhisperer/)。

![](https://img.cdn.sugarat.top/mdImg/sugar/635a631c14127003c967e24ea47e6d19)

*CLI工具目前只有Mac 版本，迁移后使用体验和 fig 一样。*

### [5. fx](https://github.com/antonmedv/fx) - 终端中友好的处理JSON

CLI 工具（Go 实现），下面是使用示例：

```sh
fx package.json
```

![](https://img.cdn.sugarat.top/mdImg/sugar/45b0292048de58e25266b5b548b2b0f2)

可以很友好的在终端里查看、搜索、修改 JSON 文件内容。

*支持 windows！*

### [6. cmdk](https://github.com/pacocoursey/cmdk) - 命令行式的React菜单组件

![](https://img.cdn.sugarat.top/mdImg/sugar/765a95d0e9d7a01fcb78822066bb6b40)

## 🤖AI工具&资讯

### [7. Chat Nio](https://github.com/Deeptrain-Community/chatnio) - 下一代 AI 一站式解决方案

> 一站式 Chat + 中转 API 站点，支持 OpenAI，Midjourney，Claude，讯飞星火，Stable Diffusion，DALL·E，ChatGLM，通义千问，腾讯混元，360 智脑，百川 AI，火山方舟，新必应，Gemini，Moonshot 等模型，支持对话分享，自定义预设，云端同步，模型市场，支持弹性计费和订阅计划模式，支持图片解析，支持联网搜索，支持模型缓存，丰富美观的后台管理与仪表盘数据统计。

*有使用诉求，或搭建多模型聚合平台的可以参考，项目开源支持私有化部署。*

### [8. StickerBaker](https://mp.weixin.qq.com/s/oqDT3_1hF1I6HGdAjZfeWA) - 个性化贴纸生成工具

访问 https://stickerbaker.com/ 即可使用，效果还行。

![](https://img.cdn.sugarat.top/mdImg/sugar/b5f3dd24f9249cff3940cd3e7550b998)

支持关键词生成，人脸图转换。

## 😛趣图

![](https://img.cdn.sugarat.top/mdImg/sugar/b6f794970ca12c977189a8b1eb08d290)

起因：
![](https://img.cdn.sugarat.top/mdImg/sugar/26d43af11c52cff0dff139f1983d97ee)

***

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<20）[移步博客](https://sugarat.top/weekly/index.html)

## ⭐️强力推荐关注

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [云谦：MDH 前端周刊](https://sorrycc.com/mdh/) - 前端资讯和分享
* [童欧巴：前端食堂](https://github.com/Geekhyt/weekly) - 你的前端食堂，吃好每一顿饭
* [前端RSS](https://fed.chanceyu.com/) - 根据 RSS 订阅源抓取最新前端技术文章
* [值得一读技术博客](https://daily-blog.chlinlearn.top/) - 每天进步一点点，每天分享有料的技术文章！
* [FRE123 技术周刊精选](https://www.fre123.com/weekly) - 前后端技术周刊精选推荐信息流