SVGcode 是一个渐进式 Web 应用,可让您将 JPG、PNG、GIF、WebP、AVIF 等的光栅图片转换为 SVG 格式的矢量图形。它使用 File System Access API、Async Clipboard API、File Handling API 和窗口控件叠加层自定义功能。
。 <ph type="x-smartling-placeholder">
从光栅图像到矢量图像
您是否曾遇到过因缩放图片而导致图片像素化且令人不满意的情况?如果 因此,您使用的可能是光栅图片格式,例如 WebP、PNG 或 JPG。
<ph type="x-smartling-placeholder">相比之下,矢量图形是由坐标系中的点定义的图像。这些 这些点通过线条和曲线连接形成多边形和其他形状。矢量图形具有 与光栅图形相比, 而且不会呈现像素化效果
<ph type="x-smartling-placeholder">SVGcode 简介
我开发了一款名为 SVGcode 的 PWA,它可以帮助您将光栅图片转换为 进行训练。致谢名单:这项技术不是我发明的。有了 SVGcode,我就站在 Potrace 命令行工具 我收到的Peter Selinger 转换成了 Web Assembly,这样它就可以在 Web 应用。
<ph type="x-smartling-placeholder">![SVGcode 应用屏幕截图。](https://web.developers.google.cn/static/case-studies/svgcode/image/svgcode-application-scree-7ad5734e2e5e1.png?authuser=9&hl=hr)
使用 SVGcode
首先,我想向大家展示如何使用这款应用。首先是 Chrome 开发者峰会的宣传片图片 是我从 ChromiumDev Twitter 渠道下载的。这是一个 PNG 光栅图像 拖动到 SVGcode 应用上。当我拖放文件时,应用会按颜色跟踪图片颜色, 直到出现输入的矢量化版本。现在我可以放大图片 边缘会保持清晰但是放大 Chrome 徽标可以看出, 尤其要注意,徽标的轮廓看起来有点儿斑点。我可以通过以下方式改善搜索结果: 通过抑制最多(如 5 个像素)的斑点,对跟踪进行去散斑处理。
<ph type="x-smartling-placeholder">SVGcode 中的海报化
向量化(尤其是对于摄影图片)的一个重要步骤是对输入进行海报化处理。 减少颜色数量。通过 SVGcode,我可以按颜色通道执行此操作, 生成 SVG 文件对结果感到满意后,就可以将 SVG 保存到硬盘上 并随时随地使用
<ph type="x-smartling-placeholder">SVGcode 中使用的 API
现在,您已经了解了该应用的功能,下面我来介绍一些 API, 就会产生奇迹
渐进式 Web 应用
SVGcode 是一个可安装的 Progressive Web App,因此完全离线启用。该应用基于 在 普通 JS 模板 (适用于 Vite.js),并使用热门 Vite 插件 PWA,用于创建一个 Service Worker, 在后台使用 Workbox.js。Workbox 是一个 支持 Progressive Web App 的生产就绪型 Service Worker 的库,这种模式 不一定适用于所有应用,但对于 SVGcode 用例,这一点非常实用。
窗口控件叠加层
为了最大限度地利用可用的屏幕空间,SVGcode 使用 窗口控件叠加层自定义:将其主菜单上移至 标题栏区域您可以看到,此扩展程序在安装流程结束时激活。
<ph type="x-smartling-placeholder">File System Access API
为了打开输入图片文件并保存生成的 SVG,我可以使用 File System Access API。这样我就可以保留对之前 并从上次停下的地方继续,即使在应用重新加载后也是如此。每当图片收到 已保存,并通过 svgo 库进行优化,这可能需要一些时间。 具体取决于 SVG 的复杂程度。显示文件保存对话框需要用户手势。时间是 因此,请务必在进行 SVG 优化之前获取文件句柄。 在优化 SVG 准备就绪时,手势是否失效。
try {
let svg = svgOutput.innerHTML;
let handle = null;
// To not consume the user gesture obtain the handle before preparing the
// blob, which may take longer.
if (supported) {
handle = await showSaveFilePicker({
types: [{description: 'SVG file', accept: {'image/svg+xml': ['.svg']}}],
});
}
showToast(i18n.t('optimizingSVG'), Infinity);
svg = await optimizeSVG(svg);
showToast(i18n.t('savedSVG'));
const blob = new Blob([svg], {type: 'image/svg+xml'});
await fileSave(blob, {description: 'SVG file'}, handle);
} catch (err) {
console.error(err.name, err.message);
showToast(err.message);
}
拖放
要打开输入图片,我可以使用文件打开功能,也可以(如上文所述)
将图片文件拖放到该应用上。文件打开功能相当简单,
最有趣的地方是拖放情况特别要注意的是
通过
getAsFileSystemHandle()
方法。如前所述,我可以保留此句柄,以便在应用重新加载时准备就绪。
document.addEventListener('drop', async (event) => {
event.preventDefault();
dropContainer.classList.remove('dropenter');
const item = event.dataTransfer.items[0];
if (item.kind === 'file') {
inputImage.addEventListener(
'load',
() => {
URL.revokeObjectURL(blobURL);
},
{once: true},
);
const handle = await item.getAsFileSystemHandle();
if (handle.kind !== 'file') {
return;
}
const file = await handle.getFile();
const blobURL = URL.createObjectURL(file);
inputImage.src = blobURL;
await set(FILE_HANDLE, handle);
}
});
有关详情,请参阅介绍 File System Access API 的文章,以及
如果感兴趣,请参考
src/js/filesystem.js
。
Async Clipboard API
SVGcode 还通过 Async Clipboard API 与操作系统的剪贴板完全集成。 您可以将操作系统的文件资源管理器中的图片粘贴到该应用中,方法是点击 粘贴图片按钮,或者按键盘上的 Command 键或 Control + V 键。
<ph type="x-smartling-placeholder">Async Clipboard API 最近也获得了处理 SVG 图片的功能,因此您可以 还可以复制 SVG 图片,并将其粘贴到其他应用中,以便进一步处理。
<ph type="x-smartling-placeholder">copyButton.addEventListener('click', async () => {
let svg = svgOutput.innerHTML;
showToast(i18n.t('optimizingSVG'), Infinity);
svg = await optimizeSVG(svg);
const textBlob = new Blob([svg], {type: 'text/plain'});
const svgBlob = new Blob([svg], {type: 'image/svg+xml'});
navigator.clipboard.write([
new ClipboardItem({
[svgBlob.type]: svgBlob,
[textBlob.type]: textBlob,
}),
]);
showToast(i18n.t('copiedSVG'));
});
如需了解详情,请阅读异步剪贴板一文,或查看
src/js/clipboard.js
。
文件处理
对于 SVGcode,我最喜欢的一个特点是它能很好地与操作系统融为一体。作为 安装 PWA,它可成为图片文件的文件处理程序,甚至是默认的文件处理程序。这个 也就是说,当我在 macOS 计算机上的“访达”中时,可以右键点击某个图片,然后使用 SVGcode。此功能称为“文件处理”,基于 网络应用清单和启动队列,可让应用使用传递的文件。
<ph type="x-smartling-placeholder">window.launchQueue.setConsumer(async (launchParams) => {
if (!launchParams.files.length) {
return;
}
for (const handle of launchParams.files) {
const file = await handle.getFile();
if (file.type.startsWith('image/')) {
const blobURL = URL.createObjectURL(file);
inputImage.addEventListener(
'load',
() => {
URL.revokeObjectURL(blobURL);
},
{once: true},
);
inputImage.src = blobURL;
await set(FILE_HANDLE, handle);
return;
}
}
});
有关详情,请参阅让已安装的 Web 应用成为文件处理程序,并在
src/js/filehandling.js
。
网络共享(文件)
另一个与操作系统融为一体的例子是应用的分享功能。假设我想 对使用 SVGcode 创建的 SVG 进行修改时,一种方法是保存文件, 启动 SVG 编辑应用,然后从中打开 SVG 文件。而更流畅的流程则是 使用 Web Share API,该 API 可让您直接共享文件。因此,如果 SVG 编辑应用是一个共享目标,它可以直接接收文件,而不会出现偏差。
shareSVGButton.addEventListener('click', async () => {
let svg = svgOutput.innerHTML;
svg = await optimizeSVG(svg);
const suggestedFileName =
getSuggestedFileName(await get(FILE_HANDLE)) || 'Untitled.svg';
const file = new File([svg], suggestedFileName, { type: 'image/svg+xml' });
const data = {
files: [file],
};
if (navigator.canShare(data)) {
try {
await navigator.share(data);
} catch (err) {
if (err.name !== 'AbortError') {
console.error(err.name, err.message);
}
}
}
});
网络共享目标(文件)
相反,SVGcode 也可以充当共享目标,并从其他应用接收文件。接收者 应用需要通过 Web Share Target API 接受哪些类型的数据。这是通过 专用字段。
{
"share_target": {
"action": "https://svgco.de/share-target/",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "image",
"accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
}
]
}
}
}
action
路由实际上不存在,而是完全在 Service Worker 的 fetch
中进行处理
处理程序,然后传递接收的文件,以便在应用中进行实际处理。
self.addEventListener('fetch', (fetchEvent) => {
if (
fetchEvent.request.url.endsWith('/share-target/') &&
fetchEvent.request.method === 'POST'
) {
return fetchEvent.respondWith(
(async () => {
const formData = await fetchEvent.request.formData();
const image = formData.get('image');
const keys = await caches.keys();
const mediaCache = await caches.open(
keys.filter((key) => key.startsWith('media'))[0],
);
await mediaCache.put('shared-image', new Response(image));
return Response.redirect('./?share-target', 303);
})(),
);
}
});
总结
好的,下面我们简单介绍了 SVGcode 中的一些高级应用功能。希望这个应用 可以成为满足图片处理需求的重要工具,与其他优质应用(例如 Squoosh 或 SVGOMG。
您可以在 svgco.de 上找到 SVGcode。看看我在这里做了什么?您可以 在 GitHub 上查看其源代码。请注意,由于 Potrace 已获得 GPL 许可,SVGcode 也是如此。至此,你可以轻松实现矢量化!希望 SVGcode 对您有所帮助。 其中一些功能可以为您的下一款应用提供灵感。
致谢
本文由 Joe Medley 审核。