昨天晚上，先是搞定一件许久之前就感觉应该改善的活儿，就是把小组件的大小从固定的尺寸改成能尽可能大地占据启动器给分配的空间。当中间那个主图变大后，又勾起了另一件之前想干的事，就是把这个主图搞成矢量图，避免缩放时候失真严重。

栅格图像转矢量图，有个效果不错的软件，叫 Vector Magic，多年前用过。到网上一搜，发现也出了在线版，网址给的是 https://zh.vectormagic.com/。打开页面一看，里面就有操作区，告诉只要把文件上传，就立等可取。依言而行，页面跳转到了一个编辑界面，左右两大内容栏并列，左侧是上传的栅格图像，右侧是转变后的矢量图像，果然边缘平滑，缩放自如。可这是你要是点击那个大大的“下载”按钮的话，它就会让你订阅，订阅的费用颇为不菲。嗐，你说这事闹得。

心里开始盘算，既然你已经显示到内容取了，有没有什么办法把内容区 dump 出来？初步检查了一下，内容区是个 Canvas 元素，于是就搜索 Canvas to SVG 的转换器，确实有，不过是供给网页制作者嵌入到页面里的。既然如此，就只好强行注入了。这种急就章是 AI 的强项，于是问 DeepSeek，几番来回，它给出了以下代码：

(function() {
    function loadScript(url) {
        return new Promise((resolve, reject) => {
            if (document.querySelector(`script[src="${url}"]`)) return resolve();
            const script = document.createElement('script');
            script.src = url;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    async function exportCanvas(id) {
        const canvas = document.getElementById(id);
        if (!canvas) throw new Error('Canvas not found');
        
        await loadScript('https://unpkg.com/canvas2svg@1.0.16/canvas2svg.js');
        
        const ctx = new C2S(canvas.width, canvas.height);
        ctx.drawImage(canvas, 0, 0);
        
        const svgString = new XMLSerializer().serializeToString(ctx.getSvg());
        const blob = new Blob([svgString], {type: 'image/svg+xml'});
        
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = `canvas-${id}-export.svg`;
        a.click();
        
        return '导出成功！';
    }

    // 使用示例：exportCanvas('yourCanvasId').then(console.log)
    window.exportCanvas = exportCanvas;
    console.log('使用方法：exportCanvas("你的Canvas元素ID")');
})();

里面最重要的 JavaScript 库的 URL 它没给对，最后是自己找的。照着代码最后的提示说明操作，果然一个 SVG 文件顺利降落，用 Edge 打开一看，效果也对得上。时间太晚，满意地睡觉去了。

今早接茬往后走。定睛一看，SVG 没错，显示效果也没错，但是，这个 SVG 的体内是内嵌了一个栅格图像，SVG 这层外衣就是聋子的耳朵。衰。又下载 Vector Magic 的 Windows 试用版，心想免费让我转一半张图片总应该可以吧，没想到也是痴心妄想。跟网站一个德性，只能看，不能保存。又看了一眼正版价格，天啦噜，400 新加坡元，2000+ 人民币啊。溜了溜了。

这就怪不得老夫了，还是寻求破解版吧，于是找到了这儿，里面提供了百度网盘和蓝奏云的链接。一般来说蓝奏云比较省力气，就点了蓝奏云。发现需要登录，正要拿自己的账号登录时，看到一行小字，说这是蓝奏云优享版，账号跟之前的老蓝奏云不想通。好，那就新注册一个，反正现在一般用手机号接个验证码就算是注册用户了。验证通过后往下走，提示购买会员，要不然不能存到云盘，显然也不能下载。果断放弃。转战百度云盘，这边风景反而好起来了，挺顺利，转存后下载到本地。

解压，幺蛾子就来了。Defender 哐哐报毒。吓得老夫硬是没敢执行，心想得把沙盒开起来。到开始菜单里寻找，咦？之前经常看着都略显眼烦的沙盒没了！再到应用商店里找，也没有。奇了怪了，难道微软的刀法已经如此之快了？赶忙放狗，才在微软官网找到开启的办法：Enable-WindowsOptionalFeature -FeatureName "Containers-DisposableClientVM" -All -Online。原样运行完毕，嚓，提示要重启。忙不迭保存、关闭一大堆开着的窗口应用。重启电脑，打开沙盒，把破解版的程序跟图片都复制进去，一番炮制后，把成品又捞了出来，美滋滋。不过沙盒跟宿主机之间不能进行文件拖放操作，略有不便，好在复制粘贴还是可以工作的。

就这么一件小事，折腾不已。支线繁杂，令人头晕。幸好最后也算“牢记使命”，把活儿弄成了。

前几天在了解 drop shadow、long shadow、outer shadow 以及 inner shadow 等等，查到一些有意思的链接，收录备此，以供后阅。

• Getting Deep Into Shadows | CSS-Tricks – CSS-Tricks
• Understanding Inner Shadows in Photoshop (tutsplus.com)
• Giving Text an Inner Shadow with ImageMagick and Perl | by William Shunn | Better Programming

之前我所知道的动图文件格式，除老牌的 gif 之外，就是 mng（基于 png 文件格式衍生出来的一种动图文件格式），后来听说过 apng（也和 png 有较近的渊源），再到最近的 webp 的动图变种。

在 ezgif.com 的相关介绍页面上，有两种格式我是从未听说过的，一种叫 flif，一种叫 avif。尤其是后者，压缩效果极为出众，只是现在各大浏览器对它的支持还不普及和完善，而且这个格式脱胎于视频文件（HEIF 文件格式中的 AV1 压缩），如果假以时日，恐怕是会称霸这个领域的。

介绍页面在这儿。