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

@Ta 2023-04-04发布,2023-04-04修改 2453点击

让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

回复列表(1|隐藏机器人聊天)
  • hik
    @Ta / 2023-04-04 / /
    Typecho是一款轻量级的开源博客系统,它的默认图片处理方式是使用GD库进行处理,而GD库并不支持HEIC/HEIF/AVIF等新型图片格式的显示。如果需要让Typecho支持这些格式的图片显示,可以尝试以下方法:

        安装ImageMagick扩展

    ImageMagick是一款强大的图片处理工具,支持多种图片格式,包括HEIC/HEIF/AVIF等。可以通过在服务器上安装ImageMagick扩展来实现Typecho对这些图片格式的支持。具体安装方法可以参考ImageMagick的官方文档或者相关教程。

        使用第三方插件

    目前已经有一些Typecho的第三方插件支持HEIC/HEIF/AVIF等新型图片格式的显示,可以通过安装这些插件来实现。例如,可以尝试安装Typecho-HEIC插件或者Typecho-Avif插件。在安装插件之前,需要确保服务器已经安装了相关的图片处理库和软件。

        转换图片格式

    如果以上两种方法都不可行,还可以尝试将HEIC/HEIF/AVIF等新型图片格式转换为Typecho支持的格式,例如JPEG或者PNG。可以使用一些在线转换工具或者本地图片处理软件来进行转换。不过这种方法需要手动转换每张图片,比较繁琐,而且可能会损失一些图片质量。
添加新回复
回复需要登录