typecho插件支持HEIC/HEIF/AVIF图片显示(来自chatgpt4)

让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

typecho插件支持HEIC/HEIF/AVIF图片显示(来自chatgpt4)

1 条回复