WPFで、画像のHTMLファイルを自動で作りたい

前提・実現したいこと

こんにちは、初めまして。
画像のHTMLファイルを自動で作りたいと思っている。
画像だけではなく、他にもHTMLタグ？を追記する予定。

実現させたい事を箇条書きにすると、以下のようになる。

実現させたい機能
0. フォルダの選択画面を表示する
0. フォルダの中身を確認する
（画像ファイル、HTMLファイル）⇒HTMLファイルが無ければ作成する
0. HTMLファイルの中身を元に、データを表示する

その他追加機能
・Imageエリアに画像ファイルがドラッグドロップされたら、画像を指定フォルダにコピーする
・上記画像をコピーしたらHTMLファイルを動的に作成する

フォルダを選択して一気に作るのは大変そうなため、
とりあえず初めにドラッグドロップで画像を取得し、自分のフォルダにコピー。
HTMLファイルを動的生成させることとした。

発生している問題・エラーメッセージ

フォルダ作成などは手動でも問題ないと思っている。
とりあえず、ドラッグドロップで画像の取得は出来、パスの取得も出来た。

現在困っている事は、以下内容。
・HTMLファイルのテンプレート（元）を作成し
部分的に置換して新しく作成したり追記してHTMLファイルを新規作成できないか。
<html>
<img src="test/test.jpg" alt="テスト">

</html>

　上記を用意して置き、imgのsrc、altを置換。
そして後にテキストやmapなど追記していきたい。

・HTMLファイルの["]から["]までの項目で抽出したい
1行読み、指定の文字列[img]などが入っていることを確認し、
「"」から「"」までの間をそれぞれ抽出したい。
containsで1行に文字が含まれているか確認し、
含まれている場合はsplitで["]を分割して1つずつキーワードと比較し
一致した次の配列が目的物……?　⇒　確認している最中

・幅800で固定し、画像が大きい場合は縮小、小さい場合はそのままにしたい
大きいサイズだと、どうしても画像の端が切れてしまう。何故か分からない。
HTMLファイルに出力する際もズレのないようにしたい。
参考に、default.png,1.jpg,2.jpg,3.jpgを添付

該当のソースコード

C#
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Text;
5using System.Threading.Tasks;
6using System.Windows;
7using System.Windows.Controls;
8using System.Windows.Data;
9using System.Windows.Documents;
10using System.Windows.Input;
11using System.Windows.Media;
12using System.Windows.Media.Imaging;
13using System.Windows.Navigation;
14using System.Windows.Shapes;
15using System.IO;
16
17namespace WpfApp5
18{
19    /// <summary>
20    /// MainWindow.xaml の相互作用ロジック
21    /// </summary>
22    public partial class MainWindow : Window
23    {
24        public MainWindow()
25        {
26            InitializeComponent();
27        }
28
29        private void image_Drop(object sender, DragEventArgs e)
30        {
31            string MyFilePath;
32            string MyFolder;
33            string FileNameOnly;
34            string HTMLFilePath;
35            string[] files = e.Data.GetData(DataFormats.FileDrop) as string[];
36
37
38            MyFolder = "TEST";
39            MyFilePath=System.AppDomain.CurrentDomain.BaseDirectory.TrimEnd('\');
40            FileInfo file = new FileInfo(files[0]);
41            string PicFileName = System.IO.Path.GetFileName(files[0]);//ファイル名取得
42
43            string Ext = System.IO.Path.GetExtension(files[0]);//拡張子
44            FileNameOnly = PicFileName.Replace(Ext, "");//ファイル名のみ
45
46            file.CopyTo(MyFilePath + "\"+ MyFolder + "\" + PicFileName);
47            //png,jpg,jpegなど複数形式の拡張子が使いたい
48            //フォルダ名称をTESTとしているが、指定のものにしたい
49
50            HTMLFilePath = MyFilePath + "\" + MyFolder + "\" + FileNameOnly + ".html";
51
52            if (File.Exists(HTMLFilePath))
53            {
54                Console.WriteLine("ファイル存在するため");
55            }
56            else
57            {
58                Console.WriteLine("存在しません");
59                Encoding enc = Encoding.GetEncoding("Shift_JIS");// 文字コード指定
60                
61                StreamWriter writer = new StreamWriter(HTMLFilePath, false, enc);// ファイルを開く
62                writer.WriteLine("<html>");// テキストを書き込む
63                string DB= "\"";
64                string HTMLData = "<img src=" + DB + PicFileName + DB;//大本のファイルのつくり方は別途要確認
65                string Alt = " alt = " + DB + "TEST" + DB + " ";// alt = "TEST" 
66                HTMLData = HTMLData + Alt + "></img>";
67                
68                writer.WriteLine(HTMLData);//<img src="imagePath"  alt="TEST"></img>
69                writer.WriteLine("<map name=" + DB + "#image-map" + DB + ">");
70                
71                writer.WriteLine(HTMLData);//<img src="imagePath"  alt="TEST"></img>
72                writer.WriteLine("</html>");
73                // ファイルを閉じる
74                writer.Close();
75            }
76            // 以下のやりかたで良いのかは不明
77            BitmapImage imageSource = new BitmapImage();
78            imageSource.BeginInit();
79            imageSource.UriSource = new Uri(files[0], UriKind.RelativeOrAbsolute);
80            imageSource.EndInit();
81            ImageArea.Source = imageSource;
82        }
83    }
84}
85

試したこと

Google検索で3時間くらい実施しているが
思ったように情報が出て来ない。

ファイルのドラッグ&ドロップで
画像をコピーし、そのHTMLファイルを作るところまでは出来た。
画像がある場合に上書きするかの画面表示も出来た。

一番気になっているのが、画像の端が切れる事。
何か対応策があればと思う。　

補足情報（FW/ツールのバージョンなど）

WPFアプリ(.NET Framework)
.NET Framework 4.7.2

Zuishin

2021/07/29 03:15

> ・HTMLファイルのテンプレート（元）を作成し部分的に置換して新しく作成したり追記してHTMLファイルを新規作成できないか。できる。 > ・HTMLファイルの["]から["]までの項目で抽出したい AngleSharp を使え。 > ・幅800で固定し、画像が大きい場合は縮小、小さい場合はそのままにしたい大きいサイズだと、どうしても画像の端が切れてしまう。 BitmapImage.DecodePixelWidth を使え。

Kokko3

2021/07/29 04:08

ありがとう。 AngleSharpを探してみる。 Default.htmlというものを作成しておき、コピーはFile.copyで出来るとは思うが、部分変更はどうするのだろうか。 AngleSharpで変更できるのだろうか。画像の方は試してみる。ありがとう。

Zuishin

2021/07/29 04:08

気にするな。

行動規範の内容に同意します

回答1件

ベストアンサー

最初は画像一覧HTMLのようなもの（フォルダに対してHTMLがひとつ）を作るのかと思いましたが、画像ごとにHTMLを作るんですね？

・HTMLファイルのテンプレート（元）を作成し部分的に置換して新しく作成したり追記してHTMLファイルを新規作成できないか。

Kokko3さんが好きにテンプレートを決められるなら、単純な置換で済むようなオレオレルールでいいんじゃないですか？

html
1<html>
2  <img src="{{FileName}}" alt="テスト">
3</html>

cs
1string template = File.ReadAllText("Default.html");
2string html = template.Replace("{{FileName}}", PicFileName)
3                      .Replace("{{hoge}}", hoge)
4                      .Replace("{{fuga}}", fuga);

例えば↑のようにして{{FileName}}を置換するということに決めてしまう。
別に@fn@でもなんでもいいわけですが、要は普通には出てこない特徴的なパターンということです。

・HTMLファイルの["]から["]までの項目で抽出したい

方法はいろいろあるでしょうが、何のために必要なのかがよくわかりません。
HTMLに追記する（やっぱりフォルダごとにひとつなのか？？）ようなことを考えていますか？

HTMLをまるごと上書きすれば済むような方法を考えたほうが幸せな気がします。

・幅800で固定し、画像が大きい場合は縮小、小さい場合はそのままにしたい
大きいサイズだと、どうしても画像の端が切れてしまう。

これはWPFの話ですね？
Windowを（も？）Width="800"にしていませんか？
枠のサイズも含むため、中にあるImageは800より小さくなります。
どういうUIを考えているかわかりませんが、例えばImageしかないのであればこのような感じ。
画像はWPFが縮小するため、リサイズは不要です（リサイズしてもかまいませんが）

xml
1<Window
2  x:Class="Questions351771.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  AllowDrop="True"
6  Drop="image_Drop"
7  ResizeMode="NoResize"
8  SizeToContent="WidthAndHeight">
9  <Grid>
10    <Image
11      x:Name="ImageArea"
12      Width="800"
13      HorizontalAlignment="Left"
14      Source="/default.png"
15      StretchDirection="DownOnly" />
16  </Grid>
17</Window>

HTMLファイルに出力する際もズレのないようにしたい。

こんなん？

html
1<html>
2  <div style="width:800px">
3    <img src="1.jpg" alt="TEST" style="max-width:100%"></img>
4  </div>
5</html>

投稿2021/07/29 08:52

編集2023/08/14 10:52

TN8001

総合スコア9321

Kokko3

2021/07/30 00:14

TN8001さん回答ありがとう。色々まとめてかいて申し訳ない。サンプルありがとう。良く分かった。テンプレートに関しては自分の好きに作って良い為 Replaceして作っていこうと思う。 ReadAllTextでやって、直接置換したらよかったのか…。勉強になった。作成済みのHTMLファイルがある場合に、既に記載されているデータが必要となってくる。(imgのsrcなど）作成済みのHTMLファイル状況を画面上に表示し、それを簡単に編集できるようなものにしようとしている。それについては、AngleSharpで取得できたので大丈夫そうだ。確認中のため、分からなければ質問すると思う。 WPFのウィンドウサイズの話であっている。言葉足らずな説明で全て理解してもらい、本当にありがたい。そして申し訳ない。画像の表示は問題なくできそうだ。ありがとう。 WPF画面右または下にツールバーみたいなものを作成しようと思っているが分からなかったら再度質問しようとおもう。

Kokko3

2021/07/30 02:48 編集

初歩的なことで大変申し訳ないが、もうひとつだけ。 File.Copy("Default.html", HTMLFilePath); これでファイルをコピーしようと思っているが Default.htmlが無いと言われてしまう。プロジェクト内にDefault.htmlはあるのだがフルパスじゃないとダメなのだろうか？申し訳ないが、分かれば教えてほしい。 →常にコピーの設定にしておらず、実行時にファイルが無かった。ごめん。　解決した。

行動規範の内容に同意します