让typecho支持HEIC/HEIF/AVIF图片显示
要将上述解码功能封装为Typecho插件并添加缓存策略，首先创建一个名为ImageDecoder的插件目录。然后在该目录中创建以下文件：
Plugin.php：插件的主文件，包含插件的元数据和生命周期方法。
assets/js/heif-web-display.js：从heif-web-display项目中获取的JavaScript库。
assets/js/image-decoder.js：包含用于解码HEIC/HEIF/AVIF图片的JavaScript代码。
Plugin.php
在Plugin.php文件中，添加插件的元数据和生命周期方法：
<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
class ImageDecoder_Plugin implements Typecho_Plugin_Interface
{
public static function activate()
{
Typecho_Plugin::factory('Widget_Archive')->footer = array('ImageDecoder_Plugin', 'footer');
return 'ImageDecoder启用成功';
}
public static function deactivate()
{
return 'ImageDecoder已禁用';
}
public static function config(Typecho_Widget_Helper_Form $form)
{
}
public static function personalConfig(Typecho_Widget_Helper_Form $form)
{
}
public static function footer()
{
$options = Helper::options();
$jsPath = $options->pluginUrl . '/ImageDecoder/assets/js';
echo <<<HTML
<script src="{$jsPath}/heif-web-display.js"></script>
<script src="{$jsPath}/image-decoder.js"></script>
HTML;
}
}
assets/js/image-decoder.js
在assets/js/image-decoder.js文件中，添加用于解码HEIC/HEIF/AVIF图片的JavaScript代码。同时，我们将添加一个缓存策略，将解码过的图片存储在浏览器的localStorage中，以加快后续的加载速度。
document.addEventListener('DOMContentLoaded', function () {
const images = document.querySelectorAll('img');
const heifWebDisplay = new HeifWebDisplay();
async function decodeImage(src) {
const cachedDataUrl = localStorage.getItem(src);
if (cachedDataUrl) {
return cachedDataUrl;
}
const decodedDataUrl = await heifWebDisplay.convert(src);
localStorage.setItem(src, decodedDataUrl);
return decodedDataUrl;
}
images.forEach(async function (img) {
const src = img.src;
const ext = src.split('.').pop().toLowerCase();
if (['heic', 'heif', 'avif'].includes(ext)) {
try {
img.src = await decodeImage(src);
} catch (error) {
console.error('Error decoding image:', error);
}
}
});
});
现在，您可以将ImageDecoder文件夹放到Typecho的plugins目录中，并在Typecho后台启用插件。这样，您的Typecho博客就可以支持HEIC/HEIF/AVIF图片显示，同时利用缓存策略加速图片的加载了。
请注意，将解码过的图片存储在浏览器的localStorage中可能会占用较多的存储空间。在实际应用中，您可以根据需求选择合适的缓存策
一加8Pro
安装ImageMagick扩展
ImageMagick是一款强大的图片处理工具，支持多种图片格式，包括HEIC/HEIF/AVIF等。可以通过在服务器上安装ImageMagick扩展来实现Typecho对这些图片格式的支持。具体安装方法可以参考ImageMagick的官方文档或者相关教程。
使用第三方插件
目前已经有一些Typecho的第三方插件支持HEIC/HEIF/AVIF等新型图片格式的显示，可以通过安装这些插件来实现。例如，可以尝试安装Typecho-HEIC插件或者Typecho-Avif插件。在安装插件之前，需要确保服务器已经安装了相关的图片处理库和软件。
转换图片格式
如果以上两种方法都不可行，还可以尝试将HEIC/HEIF/AVIF等新型图片格式转换为Typecho支持的格式，例如JPEG或者PNG。可以使用一些在线转换工具或者本地图片处理软件来进行转换。不过这种方法需要手动转换每张图片，比较繁琐，而且可能会损失一些图片质量。