{% extends "zh/base.html" %}

{% block meta_description %}
<meta name="description" content="使用ToolsForImage的免费在线工具轻松转换图片。快速改变图片格式，保持质量，顺利完成文件转换。">
{% endblock %}

{% block title %}在线转换图片 | ToolsForImage | 提供面部模糊、图片转换、编辑、调整大小、背景移除、模糊背景等全面免费的在线工具{% endblock %}

{% block content %}
<h1>免费在线图片格式转换器</h1>
<p>轻松将图片转换为不同的格式。上传图片并选择所需的输出格式。</p>
<p>支持的格式：PNG、JPG、JPEG、BMP、TIFF、WEBP、ICO</p>
<form id="conversion-form" method="post" enctype="multipart/form-data">
    <input type="file" id="image-upload" name="image" accept="image/*" style="display: none;" onchange="previewImage(event)">
    <button type="button" class="upload-button" onclick="document.getElementById('image-upload').click();">从电脑上传</button>
    <br>
    <img id="image-preview" class="image-preview" src="#" alt="图片预览" style="display: none;">
    <br>
    <select id="output-format" name="output_format" class="format-select">
        <option value="png">PNG</option>
        <option value="jpg">JPG</option>
        <option value="jpeg">JPEG</option>
        <option value="bmp">BMP</option>
        <option value="tiff">TIFF</option>
        <option value="webp">WEBP</option>
        <option value="ico">ICO</option>
    </select>
    <br>
    <button type="button" class="convert-button" onclick="convertImage()">转换！</button>
</form>

<div class="info-container">
    <div class="info-section">
        <h2>什么是图片格式转换？</h2>
        <p>图片格式转换是将一个图片文件从一种格式转换为另一种格式的过程。例如，您可能想将PNG文件转换为JPG文件。不同的格式有不同的用途，选择正确的格式可以显著影响您的图片质量和兼容性。通过转换图片，您可以确保它们在各种设备、应用程序和在线平台上兼容。</p>
    </div>
    <div class="info-section">
        <h2>为什么要转换图片？</h2>
        <p>转换图片有很多原因。有些格式，比如PNG，非常适合高质量的图形，而其他格式，如JPG，则更适合照片。转换图片可以帮助减小文件大小，使其在网站上加载更快，这对于用户体验和SEO非常关键。此外，较小的文件大小有助于节省存储空间。它还确保您的图片看起来最好，无论是在线分享还是准备打印。通过转换图片，您还可以使它们适用于不同的应用程序，例如社交媒体、电子邮件或网页设计。</p>
    </div>
    <div class="info-section">
        <h2>如何使用我们的图片格式转换工具</h2>
        <p>使用我们的图片格式转换工具既简单又直观。只需上传您的图片，选择您想要的格式，然后点击“转换！”您可以将图片转换为常见格式，如PNG、JPG、JPEG、BMP、TIFF和WEBP。我们的工具确保在转换过程中您的图片质量不受影响，因此您无需担心丢失重要的细节。</p>
        <p>此外，我们的图片转换工具设计注重用户友好性。无论您是专业摄影师需要批量转换图片，还是普通用户只想转换一张照片，我们的工具都能满足您的需求。而且，它可以跨所有设备使用，随时随地访问。</p>
    </div>
    <div class="info-section">
        <h2>使用我们的图片格式转换工具的好处</h2>
        <p>我们的图片格式转换工具提供了许多好处：</p>
        <ul>
            <li><strong>快速高效：</strong> 快速转换图片，不会影响质量。</li>
            <li><strong>支持多种格式：</strong> 轻松在各种格式之间切换，以满足您的需求。</li>
            <li><strong>在线可访问：</strong> 无需安装软件，直接通过您的浏览器访问工具。</li>
            <li><strong>用户友好的界面：</strong> 直观的设计，让每个人都能轻松转换图片。</li>
            <li><strong>高质量输出：</strong> 确保您的图片在转换后看起来清晰而生动。</li>
        </ul>
    </div>
    <div class="info-section">
        <h2>图片格式转换的常见应用场景</h2>
        <p>图片格式转换在许多场景中非常重要：</p>
        <ul>
            <li><strong>网站优化：</strong> 将图片转换为加载快速的格式，提高网站性能。</li>
            <li><strong>社交媒体分享：</strong> 调整图片大小和格式，以符合平台要求。</li>
            <li><strong>专业打印：</strong> 为打印项目准备高质量的图片格式。</li>
            <li><strong>数字营销：</strong> 使用合适的格式提升广告和营销活动的视觉效果。</li>
        </ul>
    </div>
</div>


<script>
    function validateImageSelection() {
        const imageUpload = document.getElementById('image-upload');
        if (!imageUpload.value) {
            alert('Please select an image to upload.');
            return false;
        }
        return true;
    }

    function previewImage(event) {
        const imagePreview = document.getElementById('image-preview');
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                imagePreview.style.display = 'block';
            }
            reader.readAsDataURL(file);
        }
    }

    async function convertImage() {
        const fileInput = document.getElementById('image-upload');
        const outputFormat = document.getElementById('output-format').value;

        if (!fileInput.files || fileInput.files.length === 0) {
            alert('Please select an image to upload.');
            return;
        }

        const file = fileInput.files[0];
        const mimeType = `image/${outputFormat}`;

        try {
            const convertedBlob = await imageConversion.compress(file, {
                type: mimeType,
                quality: 0.95 // Adjust quality as needed
            });

            const downloadLink = document.createElement('a');
            downloadLink.href = URL.createObjectURL(convertedBlob);
            downloadLink.download = `converted_image.${outputFormat}`;
            downloadLink.click();
        } catch (error) {
            console.error('Error converting image:', error);
            alert('An error occurred while converting the image.');
        }
    }
</script>

<style>
    .upload-button {
        background-color: var(--link-hover-color);
        color: var(--background-color);
        padding: 20px 40px;
        border: none;
        cursor: pointer;
        font-size: 20px;
        transition: transform 0.3s;
        border-radius: 5px;
    }
    .upload-button:hover {
        transform: scale(1.1);
    }
    .convert-button {
        background-color: var(--background-color);
        color: var(--box-hover-color);
        border: 2px solid var(--box-hover-color);
        padding: 10px 20px;
        cursor: pointer;
        font-size: 20px;
        transition: transform 0.3s;
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 5px;
    }
    .image-preview {
        margin-top: 20px;
        max-width: 100%;
        max-height: 300px;
        display: none;
        margin-left: auto;
        margin-right: auto;
        display: block;
        border-radius: 5px;
    }
    .format-select {
        margin-top: 20px;
        padding: 10px;
        font-size: 16px;
    }
        form, h1, p {
        text-align: center;
    }
    h1, h2 {
        text-align: center;
    }

    form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .upload-button, .convert-button, .format-select {
        margin-left: auto;
        margin-right: auto;
    }

    p {
        margin: 10px 20px;
        line-height: 1.6;
    }
    form, h1, p {
        text-align: center;
    }
    
    form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    li {
        line-height: 1.6;
    }

    
</style>
{% endblock %}