格式扩展
这篇文章将阐述格式扩展插件的基本概念。
格式扩展插件的主要目的是使 Eagle 能够预览尚未支持的文件格式。与其他类型插件不同，格式扩展插件在 manifest.json 中不需要定义 main 属性，而是需要设置 preview 属性。以下是一个范例代码：
"preview": {}在 preview 中可以定义要扩展的文件扩展名。例如，如果想要让 Eagle 支持 icns 图标格式，可以输入 "icns": {}：
"preview" : {
"icns": {}
}另外，如果你需要同时设定多个扩展名，你可以使用 , 将不同扩展名隔开进行定义，比如：
"preview" : {
"icns,ico": {}
}格式扩展插件可以分成两个部分：
"thumbnail.path"：提供用于解析要扩展的文件格式的缩略图的.js文件。"viewer.path"：提供用于预览要扩展的格式的.html文件。
"preview": {
"icns": {
"thumbnail": {
"path": "thumbnail/icns.js",
"size": 400,
"allowZoom": false
},
"viewer": {
"path": "viewer/icns.html"
}
}
}设置其它 metadata.json 字段后，最终代码如下：
{
"id": "LARSKLB8OTOC2",
"version": "1.0.0",
"platform": "all",
"arch": "all",
"name": "Preview Plugin",
"logo": "/logo.png",
"keywords": [
"icns"
],
"devTools": false,
"preview": {
"icns,ico": {
"thumbnail": {
"path": "thumbnail/icns.js",
"size": 400,
"allowZoom": false
},
"viewer": {
"path": "viewer/icns.html"
}
}
}
}const fs = require('fs');
const icns = require('./../js/icns-util.js');
const imageSize = require('./../js/image-size.js');
module.exports = async ({ src, dest, item }) => {
return new Promise(async (resolve, reject) => {
try {
// 1. parsing and generate thumbnail file to dest
await icns.icns2png(src, dest);
let size = await imageSize(dest);
// 2. Check if the result is correct
if (!fs.existsSync(dest) || size.width === 0) {
return reject(new Error(`icns file thumbnail generate fail.`));
}
// 3. update the item dimensions
item.height = size?.height || item.height;
item.width = size?.width || item.width;
// 4. return the result
return resolve(item);
}
catch (err) {
return reject(err);
}
});
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ICNS Viewer</title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
#viewer {
pointer-events: none;
object-fit: contain;
object-position: center;
width: 100%;
height: 100%;
max-width: 100vw;
max-height: 100vh;
}
</style>
</head>
<body>
<img id="viewer"/>
<script>
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');
const filePath = urlParams.get('path');
const width = urlParams.get('width');
const height = urlParams.get('height');
const theme = urlParams.get('theme');
const lang = urlParams.get('lang');
const viewer = document.querySelector('#viewer');
// 1. Load the thumbnail image first
// 👍 Avoid loading for too long, and UI has no content
viewer.src = filePath.replace(".icns", "_thumbnail.png");
// 2. Load the file and replace thumbnail
(async function() {
const icns = require('./../js/icns-util.js');
let buffer = await icns.icns2buffer(filePath);
let base64 = `data:image/png;base64,${buffer.toString('base64')}`;
viewer.src = base64;
})();
</script>
</body>
</html>请注意，目前格式扩展插件不支持 Eagle Plugin API 和 DevTools 调试功能。
最后更新于