feat: 工具页：图片转DDS

Author: Applesaber

ChuChartManager/Controllers/ImgToDDS.cs

@@ -0,0 +1,61 @@
+using BCnEncoder.Encoder;
+using BCnEncoder.ImageSharp;
+using BCnEncoder.Shared;
+using Microsoft.AspNetCore.Mvc;
+using SixLabors.ImageSharp;
+using SixLabors.ImageSharp.PixelFormats;
+using SixLabors.ImageSharp.Processing;
+
+namespace ChuChartManager.Controllers;
+
+[ApiController]
+[Route("api/[controller]/[action]")]
+public class ToolsController : ControllerBase
+{
+    public class ConvertImageToDdsRequest
+    {
+        public string SourcePath { get; set; } = "";
+        public string? Format { get; set; }
+        public int? Width { get; set; }
+        public int? Height { get; set; }
+        public bool GenerateMipMaps { get; set; }
+    }
+
+    [HttpPost]
+    public IActionResult ConvertImageToDds([FromBody] ConvertImageToDdsRequest request)
+    {
+        if (string.IsNullOrWhiteSpace(request.SourcePath) || !System.IO.File.Exists(request.SourcePath))
+            return BadRequest("源文件不存在");
+
+        using var image = SixLabors.ImageSharp.Image.Load<Rgba32>(request.SourcePath);
+
+        var width = request.Width ?? image.Width;
+        var height = request.Height ?? image.Height;
+        if (width != image.Width || height != image.Height)
+            image.Mutate(x => x.Resize(width, height));
+
+        var compressionFormat = request.Format?.ToLowerInvariant() switch
+        {
+            "bc3" => CompressionFormat.Bc3,
+            "bc7" => CompressionFormat.Bc7,
+            _ => CompressionFormat.Bc1,
+        };
+
+        var encoder = new BcEncoder(compressionFormat)
+        {
+            OutputOptions =
+            {
+                GenerateMipMaps = request.GenerateMipMaps,
+                FileFormat = OutputFileFormat.Dds,
+                Quality = CompressionQuality.BestQuality,
+            },
+        };
+
+        var fileName = System.IO.Path.GetFileNameWithoutExtension(request.SourcePath) + ".dds";
+
+        using var ms = new System.IO.MemoryStream();
+        encoder.EncodeToStream(image, ms);
+
+        return File(ms.ToArray(), "application/octet-stream", fileName);
+    }
+}

ChuChartManager/Front/src/api/imgToDds.ts

@@ -0,0 +1,32 @@
+import { apiClient } from './index'
+
+export interface ConvertImgToDdsRequest {
+  sourcePath: string
+  format?: 'bc1' | 'bc3' | 'bc7'
+  width?: number
+  height?: number
+  generateMipMaps?: boolean
+}
+
+export async function convertImgToDds(params: ConvertImgToDdsRequest): Promise<void> {
+  const response = await apiClient.post('/api/Tools/ConvertImageToDds', params, {
+    responseType: 'blob',
+  })
+
+  const contentDisposition = response.headers['content-disposition']
+  let fileName = 'output.dds'
+  if (contentDisposition) {
+    const match = contentDisposition.match(/filename\*?=(?:UTF-8'')?([^;\s]+)/i)
+    if (match) fileName = decodeURIComponent(match[1])
+  }
+
+  const blob = new Blob([response.data], { type: 'application/octet-stream' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = fileName
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}

ChuChartManager/Front/src/locales/en.yaml

@@ -457,6 +457,23 @@ ddsExtractor:
   extract: Extract
   done: "Extraction complete: {count} DDS from {files} file(s)"
   failed: Extraction failed
+imgToDds:
+  title: Image to DDS
+  desc: Convert common image formats to DDS texture
+  selectImage: Select Image
+  noImage: No image selected
+  format: Compression Format
+  bc1: BC1 / DXT1
+  bc3: BC3 / DXT5
+  bc7: BC7
+  width: Output Width
+  height: Output Height
+  auto: Auto
+  generateMipMaps: Generate Mipmaps
+  convert: Convert
+  converting: Converting…
+  success: Conversion successful
+  failed: Conversion failed
 emote:
   title: Emote Models
   data: Emote Models

ChuChartManager/Front/src/locales/ja.yaml

@@ -448,6 +448,23 @@ ddsExtractor:
   extract: 抽出
   done: "抽出完了：{count} DDS、{files} ファイルから"
   failed: 抽出失敗
+imgToDds:
+  title: 画像を DDS に変換
+  desc: 一般的な画像形式を DDS テクスチャに変換します
+  selectImage: 画像を選択
+  noImage: 画像が選択されていません
+  format: 圧縮形式
+  bc1: BC1 / DXT1
+  bc3: BC3 / DXT5
+  bc7: BC7
+  width: 出力幅
+  height: 出力高さ
+  auto: 自動
+  generateMipMaps: Mipmap を生成
+  convert: 変換
+  converting: 変換中…
+  success: 変換成功
+  failed: 変換失敗
 emote:
   title: Emote モデル
   data: Emote モデル

ChuChartManager/Front/src/locales/zh.yaml

@@ -457,6 +457,23 @@ ddsExtractor:
   extract: 提取
   done: "提取完成：{count} 个 DDS，来自 {files} 个文件"
   failed: 提取失败
+imgToDds:
+  title: 图片转 DDS
+  desc: 将常用图片格式转换为 DDS 纹理
+  selectImage: 选择图片
+  noImage: 未选择图片
+  format: 压缩格式
+  bc1: BC1 / DXT1
+  bc3: BC3 / DXT5
+  bc7: BC7
+  width: 输出宽度
+  height: 输出高度
+  auto: 自动
+  generateMipMaps: 生成 Mipmap
+  convert: 转换
+  converting: 转换中…
+  success: 转换成功
+  failed: 转换失败
 emote:
   title: Emote 模型
   data: Emote 模型

ChuChartManager/Front/src/views/Tools/index.tsx

@@ -7,9 +7,10 @@ import DirSelect from '@/components/DirSelect'
 import { openImageFileDialog, createTrophy, createNamePlate, createAvatarAccessory, createMapIcon, getResourceList, getLocalImagePreviewUrl } from '@/api/customResource'
 import { openAfbFileDialog, openAfbFolderDialog, extractDds } from '@/api/ddsExtractor'
 import type { ExtractResult } from '@/api/ddsExtractor'
+import { convertImgToDds } from '@/api/imgToDds'
 import CharaCreator from './CharaCreator'
 
-type ModalType = null | 'trophy' | 'namePlate' | 'avatarAccessory' | 'mapIcon' | 'ddsExtractor'
+type ModalType = null | 'trophy' | 'namePlate' | 'avatarAccessory' | 'mapIcon' | 'ddsExtractor' | 'imgToDds'
 
 export default defineComponent({
   setup() {
@@ -22,6 +23,14 @@ export default defineComponent({
     const ddsExtracting = ref(false)
     const ddsResults = ref<ExtractResult[]>([])
 
+    // imgtodds
+    const imgPath = ref('')
+    const converting = ref(false)
+    const imgFormat = ref<'bc1' | 'bc3' | 'bc7'>('bc1')
+    const imgWidth = ref(0)
+    const imgHeight = ref(0)
+    const generateMipMaps = ref(false)
+
     const targetDir = ref('')
     const resourceId = ref(9000)
     const resourceName = ref('')
@@ -67,8 +76,16 @@ export default defineComponent({
       { icon: 'i-mdi-hanger', labelKey: 'tools.createAvatarAccessory', action: () => openModal('avatarAccessory'), experimental: true },
       { icon: 'i-mdi-map-marker', labelKey: 'tools.createMapIcon', action: () => openModal('mapIcon'), experimental: true },
       { icon: 'i-mdi-account', labelKey: 'tools.createChara', action: () => { showCharaCreator.value = true }, experimental: true },
+      { icon: 'i-mdi-image-multiple', labelKey: 'imgToDds.title', action: () => openModal('imgToDds'), experimental: false },
+    ])
+
+    const formatOptions = computed<SelectOption[]>(() => [
+      { label: t('imgToDds.bc1'), value: 'bc1' },
+      { label: t('imgToDds.bc3'), value: 'bc3' },
+      { label: t('imgToDds.bc7'), value: 'bc7' },
     ])
 
+
     function openModal(type: ModalType) {
       activeModal.value = type
       resourceId.value = 9000
@@ -80,6 +97,7 @@ export default defineComponent({
       textureImagePath.value = ''
       accessoryCategory.value = 1
       idConflict.value = false
+      imgPath.value = ''
       const custom = optionDirs.value.filter(d => d.dirName !== 'A000')
       if (custom.length > 0 && !targetDir.value)
         targetDir.value = custom[0].dirName
@@ -94,6 +112,11 @@ export default defineComponent({
       if (path) imagePath.value = path
     }
 
+    async function selectImgToDdsImage() {
+      const path = await openImageFileDialog()
+      if (path) imgPath.value = path
+    }
+
     async function selectIconImage() {
       const path = await openImageFileDialog()
       if (path) iconImagePath.value = path
@@ -134,6 +157,30 @@ export default defineComponent({
       }
     }
 
+    async function handleConvert() {
+      if (!imgPath.value) {
+        addToast({ message: t('imgToDds.noImage'), type: 'error' })
+        return
+      }
+      converting.value = true
+      try {
+        await convertImgToDds({
+          sourcePath: imgPath.value,
+          format: imgFormat.value,
+          width: imgWidth.value || undefined,
+          height: imgHeight.value || undefined,
+          generateMipMaps: generateMipMaps.value,
+        })
+        addToast({ message: t('imgToDds.success'), type: 'success' })
+        closeModal()
+      } catch (e: any) {
+        const msg = e?.response?.data || e?.message || t('imgToDds.failed')
+        addToast({ message: String(msg), type: 'error' })
+      } finally {
+        converting.value = false
+      }
+    }
+
     async function checkIdConflict() {
       if (!activeModal.value) return
       idChecking.value = true
@@ -222,6 +269,7 @@ export default defineComponent({
         case 'namePlate': return t('tools.createNamePlate')
         case 'avatarAccessory': return t('tools.createAvatarAccessory')
         case 'mapIcon': return t('tools.createMapIcon')
+        case 'imgToDds': return t('imgToDds.title')
         default: return ''
       }
     })
@@ -317,6 +365,33 @@ export default defineComponent({
                   <Button onClick={handleExtractDds} ing={ddsExtracting.value}>{t('ddsExtractor.extract')}</Button>
                 </div>
               </div>
+            ) : activeModal.value === 'imgToDds' ? (
+              <div class="flex flex-col gap-3 p-2">
+                <p class="text-sm op-50">{t('imgToDds.desc')}</p>
+                {renderImageSelector(imgPath, selectImgToDdsImage, t('imgToDds.selectImage'))}
+                <div>
+                  <label class="block text-sm op-60 mb-1">{t('imgToDds.format')}</label>
+                  <Select options={formatOptions.value} v-model:value={imgFormat.value} />
+                </div>
+                <div class="flex gap-3">
+                  <div class="flex-1">
+                    <label class="block text-sm op-60 mb-1">{t('imgToDds.width')}</label>
+                    <NumberInput v-model:value={imgWidth.value} min={0} max={8192} placeholder={t('imgToDds.auto')} />
+                  </div>
+                  <div class="flex-1">
+                    <label class="block text-sm op-60 mb-1">{t('imgToDds.height')}</label>
+                    <NumberInput v-model:value={imgHeight.value} min={0} max={8192} placeholder={t('imgToDds.auto')} />
+                  </div>
+                </div>
+                <label class="flex items-center gap-2 text-sm cursor-pointer">
+                  <input type="checkbox" v-model={generateMipMaps.value} class="checkbox checkbox-primary" />
+                  <span>{t('imgToDds.generateMipMaps')}</span>
+                </label>
+                <div class="flex justify-end gap-2 mt-2">
+                  <Button onClick={closeModal}>{t('common.cancel')}</Button>
+                  <Button onClick={handleConvert} ing={converting.value}>{t('imgToDds.convert')}</Button>
+                </div>
+              </div>
             ) : (
               <div class="flex flex-col gap-3 p-2">
                 <div>