Delphi. TRichView. Как добавить изображение и сохранить его в базе в нормальном HTML формате?

В прошлом посте мы сохраняли в базу контент в HTML формате, но проблема была в том, что программа c TRichView копировала изображение в некую директорию и прописывала пути относительно неё. Оно и записывалось и читалось корректно, но в пределах одного компьютера. Если же, скажем, нам нужно прочитать контент, в котором картинка на некотором удаленном сервере, а пусть даже и на локальном, то такой вариант бы не прокатил. Короче, хотелось сделать по нормальному, по человечески, как это работает в традиционном WEB.

То есть, если картинка, то в базе она должна записываться как

<img class="aligncenter wp-image-5219" src="http://digital-flame.ru/wp-content/uploads/2016/08/1-1024x331.jpg" alt="1" width="700" height="227" />

1	<img class="aligncenter wp-image-5219" src="http://digital-flame.ru/wp-content/uploads/2016/08/1-1024x331.jpg" alt="1" width="700" height="227" />

а не просто

pic1.jpg

pic1.jpg

Как же этого добиться? Пару дней покопавшись с документацией TRichView я пришел к такому вот решению.

Прежде всего, нам нужно обработать событие RvHtmlImporterImageRequired2 у компонента RvHtmlImporter

вот таким вот образом…

procedure TVisualFrame.RvHtmlImporterImageRequired2(Sender: TObject;
  const src: string; Width, Height: Integer; var Img: TGraphic);
var
  FileName: string;
  Index: Integer;
  Stream: TMemoryStream;
  TempFileName: string;
  FileStream: TFileStream;
  pic: TPicture;
  Img2: TGraphic;

  bmp:TBitmap;
  image:Timage;


begin

try

       Img:=nil;

      // Определяем путь картинки
        if Pos(':', src)>0 then
            FileName := src  // absolute path
          else
            FileName := RvHtmlImporter.BasePath+src; // relative path

      //Если такое изображение уже есть среди загруженных - берем его в Img

       Index:= DownLoadedImages.IndexOf(FileName);
       if Index<>-1 then
       begin
       Img := RV_CreateGraphics(TGraphicClass(TGraphic(DownloadedImages.Objects[Index]).ClassType));
       Img.Assign(TGraphic(DownloadedImages.Objects[Index]));
       exit;
       end;

       //Продолжаем. Если его там нет - загружаем из сети
        if (Pos('http://', LowerCase(FileName))<>0) or
         (Pos('https://', LowerCase(FileName))<>0)
        then begin

        Stream := TMemoryStream.Create;
        Stream.Position:=0;

        try
        // 1. Downloading
        IdHTTP.Get(FileName,Stream);
        Stream.Position:=0;



            // 2. creating temporal file
            TempFileName := GetTempFileName(ExtractFileExt(src));
            FileStream := TFileStream.Create(TempFileName, fmCreate);


             try
             FileStream.CopyFrom(Stream,0);
             finally
             FreeAndNil(FileStream);
             end;


                // 3.reading and deleting temporal file
                   pic := TPicture.Create;

                    try
                      pic. LoadFromFile(TempFileName);


                      Img := RV_CreateGraphics(TGraphicClass(pic.Graphic.ClassType));
                       Img.Assign(pic.Graphic);

                    finally
                      FreeAndNil(pic);
                      DeleteFile(TempFileName);
                    end;


        //

        finally
        FreeAndNil(Stream);
        end;



        end else


        { READING IF LOCAL FILE }
        begin


            pic := TPicture.Create;
            try
              pic.LoadFromFile(FileName);
              Img := RV_CreateGraphics(TGraphicClass(pic.Graphic.ClassType));
              Img.Assign(pic.Graphic);
            finally
              FreeAndNil(pic);
            end;



        end;


        // ADDING TO DOWNLOADED if not NIL
            if Img<>nil then begin
            Img2 := RV_CreateGraphics(TGraphicClass(Img.ClassType));
            Img2.Assign(Img);
            DownloadedImages.AddObject(FileName, Img2)
            end;



except

    Img.Free;
    Img := nil;

end;


  //Если ничего не загрузислось ниоткуда...
      if Img=nil then begin
    { FAILED. CREATING DEFAULT IMAGE }
    if Width=0 then
      Width := 23;
    if Height=0 then
      Height := 23;
    Img := TBitmap.Create;
    Img.Width := Width;
    Img.Height := Height;
    TBitmap(Img).Canvas.Pen.Color := clRed;
    TBitmap(Img).Canvas.Font.Color := clRed;
    TBitmap(Img).Canvas.Rectangle(0,0,Width,Height);
    TBitmap(Img).Canvas.TextOut(2, 2, '?!');
    Img2 := RV_CreateGraphics(TGraphicClass(Img.ClassType));
    Img2.Assign(Img);
    DownloadedImages.AddObject(FileName, Img2)
  end;


end;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

procedure TVisualFrame.RvHtmlImporterImageRequired2(Sender: TObject;

const src: string; Width, Height: Integer; var Img: TGraphic);

var

FileName: string;

Index: Integer;

Stream: TMemoryStream;

TempFileName: string;

FileStream: TFileStream;

pic: TPicture;

Img2: TGraphic;

bmp:TBitmap;

image:Timage;

begin

try

Img:=nil;

// Определяем путь картинки

if Pos(':', src)>0 then

FileName := src // absolute path

else

FileName := RvHtmlImporter.BasePath+src; // relative path

//Если такое изображение уже есть среди загруженных - берем его в Img

Index:= DownLoadedImages.IndexOf(FileName);

if Index<>-1 then

begin

Img := RV_CreateGraphics(TGraphicClass(TGraphic(DownloadedImages.Objects[Index]).ClassType));

Img.Assign(TGraphic(DownloadedImages.Objects[Index]));

exit;

end;

//Продолжаем. Если его там нет - загружаем из сети

if (Pos('http://', LowerCase(FileName))<>0) or

(Pos('https://', LowerCase(FileName))<>0)

then begin

Stream := TMemoryStream.Create;

Stream.Position:=0;

try

// 1. Downloading

IdHTTP.Get(FileName,Stream);

Stream.Position:=0;

// 2. creating temporal file

TempFileName := GetTempFileName(ExtractFileExt(src));

FileStream := TFileStream.Create(TempFileName, fmCreate);

try

FileStream.CopyFrom(Stream,0);

finally

FreeAndNil(FileStream);

end;

// 3.reading and deleting temporal file

pic := TPicture.Create;

try

pic. LoadFromFile(TempFileName);

Img := RV_CreateGraphics(TGraphicClass(pic.Graphic.ClassType));

Img.Assign(pic.Graphic);

finally

FreeAndNil(pic);

DeleteFile(TempFileName);

end;

finally

FreeAndNil(Stream);

end;

end else

{ READING IF LOCAL FILE }

begin

pic := TPicture.Create;

try

pic.LoadFromFile(FileName);

Img := RV_CreateGraphics(TGraphicClass(pic.Graphic.ClassType));

Img.Assign(pic.Graphic);

finally

FreeAndNil(pic);

end;

// ADDING TO DOWNLOADED if not NIL

if Img<>nil then begin

Img2 := RV_CreateGraphics(TGraphicClass(Img.ClassType));

Img2.Assign(Img);

DownloadedImages.AddObject(FileName, Img2)

end;

except

Img.Free;

Img := nil;

end;

//Если ничего не загрузислось ниоткуда...

if Img=nil then begin

{ FAILED. CREATING DEFAULT IMAGE }

if Width=0 then

Width := 23;

if Height=0 then

Height := 23;

Img := TBitmap.Create;

Img.Width := Width;

Img.Height := Height;

TBitmap(Img).Canvas.Pen.Color := clRed;

TBitmap(Img).Canvas.Font.Color := clRed;

TBitmap(Img).Canvas.Rectangle(0,0,Width,Height);

TBitmap(Img).Canvas.TextOut(2, 2, '?!');

Img2 := RV_CreateGraphics(TGraphicClass(Img.ClassType));

Img2.Assign(Img);

DownloadedImages.AddObject(FileName, Img2)

end;

Далее, нам нужно обработать событие OnSaveImage2 у компонента RichViewEdit

procedure TVisualFrame.RichViewEditSaveImage2(Sender: TCustomRichView;
  Graphic: TGraphic; SaveFormat: TRVSaveFormat; const Path, ImagePrefix: string;
  var ImageSaveNo: Integer; var Location: string; var DoDefault: Boolean);

var URL:string;

begin

DoDefault:=False;


RichViewEdit.TopLevelEditor.BeginUndoGroup(rvutInsert);
RichViewEdit.TopLevelEditor.SetUndoGroupMode(True);
if RichViewEdit.InsertPicture('', Graphic, rvvaBaseline) then
  RichViewEdit.SetCurrentItemExtraStrProperty(rvespImageFileName, URL, True);
RichViewEdit.TopLevelEditor.SetUndoGroupMode(False);


end;

procedure TVisualFrame.RichViewEditSaveImage2(Sender: TCustomRichView;

Graphic: TGraphic; SaveFormat: TRVSaveFormat; const Path, ImagePrefix: string;

var ImageSaveNo: Integer; var Location: string; var DoDefault: Boolean);

var URL:string;

begin

DoDefault:=False;

RichViewEdit.TopLevelEditor.BeginUndoGroup(rvutInsert);

RichViewEdit.TopLevelEditor.SetUndoGroupMode(True);

if RichViewEdit.InsertPicture('', Graphic, rvvaBaseline) then

RichViewEdit.SetCurrentItemExtraStrProperty(rvespImageFileName, URL, True);

RichViewEdit.TopLevelEditor.SetUndoGroupMode(False);

end;

Теперь, если поработать с программой, то код в базе будет выглядеть например так…

<body>
<p class=rvps1><img width=700 height=151 alt="5" src="http://digital-flame.ru/wp-content/uploads/2016/08/5-1024x220.jpg"></p>
<p><br></p>
<p class=rvps1><a href="http://digital-flame.ru/wp-content/uploads/2016/08/2.jpg"><img width=300 height=390 alt="2" src="http://digital-flame.ru/wp-content/uploads/2016/08/2.jpg"></a></p>
<p class=rvps1><br></p>
<p>&#1056;&#1072;&#1079;&#1088;&#1072;&#1073;&#1072;&#1090;&#1099;&#1074;&#1072;&#1102; &#1085;&#1077;&#1073;&#1086;&#1083;&#1100;&#1096;&#1086;&#1081; &#1082;&#1086;&#1084;&#1087;&#1086;&#1085;&#1077;&#1085;&#1090; - &#1090;&#1077;&#1082;&#1089;&#1090;&#1086;&#1074;&#1099;&#1081; &#1088;&#1077;&#1076;&#1072;&#1082;&#1090;&#1086;&#1088; DBTextEditor, &#1076;&#1083;&#1103; &#1089;&#1074;&#1086;&#1077;&#1081; &#1087;&#1088;&#1086;&#1075;&#1088;&#1072;&#1084;&#1084;&#1099; . &#1042; &#1073;&#1072;&#1079;&#1077; &#1076;&#1072;&#1085;&#1085;&#1099;&#1077; &#1073;&#1091;&#1076;&#1091;&#1090; &#1093;&#1088;&#1072;&#1085;&#1080;&#1090;&#1100;&#1089;&#1103; &#1074; HTML &#1092;&#1086;&#1088;&#1084;&#1072;&#1090;&#1077; &#1074; &#1086;&#1073;&#1099;&#1095;&#1085;&#1086;&#1084; &#1090;&#1077;&#1082;&#1089;&#1090;&#1086;&#1074;&#1086;&#1084; &#1087;&#1086;&#1083;&#1077;. &#1059; &#1084;&#1077;&#1085;&#1103; MySQL, &#1103; &#1080;&#1089;&#1087;&#1086;&#1083;&#1100;&#1079;&#1091;&#1102; TEXT &#1087;&#1086;&#1083;&#1077;. &#1048;&#1079;&#1086;&#1073;&#1088;&#1072;&#1078;&#1077;&#1085;&#1080;&#1103; &#1073;&#1091;&#1076;&#1091;&#1090; &#1093;&#1088;&#1072;&#1085;&#1080;&#1090;&#1100;&#1089;&#1103; &#1088;&#1103;&#1076;&#1086;&#1084; &#1089; EXE - &#1074; &#1086;&#1090;&#1076;&#1077;&#1083;&#1100;&#1085;&#1086;&#1081; &#1087;&#1072;&#1087;&#1082;&#1077; Pics, &#1072; &#1074; &#1073;&#1072;&#1079;&#1077; &#1073;&#1091;&#1076;&#1091;&#1090; &#1090;&#1086;&#1083;&#1100;&#1082;&#1086; &#1089;&#1089;&#1099;&#1083;&#1082;&#1080; &#1085;&#1072; &#1080;&#1079;&#1086;&#1073;&#1088;&#1072;&#1078;&#1077;&#1085;&#1080;&#1077; - &#1095;&#1090;&#1086; &#1080;&#1079;&#1073;&#1072;&#1074;&#1080;&#1090; &#1086;&#1090; &#1088;&#1072;&#1079;&#1076;&#1091;&#1090;&#1080;&#1103; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094; &#1087;&#1088;&#1080; &#1080;&#1089;&#1087;&#1086;&#1083;&#1100;&#1079;&#1086;&#1074;&#1072;&#1085;&#1080;&#1080; BLOB &#1087;&#1086;&#1083;&#1077;&#1081;. &#1050;&#1086;&#1084;&#1087;&#1086;&#1085;&#1077;&#1085;&#1090; &#1088;&#1072;&#1079;&#1088;&#1072;&#1073;&#1072;&#1090;&#1099;&#1074;&#1072;&#1102; &#1089; &#1087;&#1086;&#1084;&#1086;&#1097;&#1100;&#1102; &#1092;&#1088;&#1101;&#1081;&#1084;&#1072;. &#1058;&#1086; &#1077;&#1089;&#1090;&#1100;, &#1076;&#1086;&#1089;&#1090;&#1091;&#1087; &#1082;&#1086; &#1074;&#1089;&#1077;&#1084; &#1087;&#1086;&#1083;&#1103;&#1084; &#1080; &#1084;&#1077;&#1090;&#1086;&#1076;&#1072;&#1084; &#1073;&#1091;&#1076;&#1077;&#1090; &#1087;&#1088;&#1080;&#1084;&#1077;&#1088;&#1085;&#1086; &#1090;&#1072;&#1082;&#1080;&#1084; <span class=rvts12>DBTextEditor.VisualFrame.SomeMethod</span> &#1042;&#1099;&#1075;&#1083;&#1103;&#1076;&#1080;&#1090; &#1092;&#1088;&#1101;&#1081;&#1084; &#1087;&#1088;&#1080;&#1084;&#1077;&#1088;&#1085;&#1086; &#1090;&#1072;&#1082;&#1080;&#1084; &#1086;&#1073;&#1088;&#1072;&#1079;&#1086;&#1084; </p>
<p><br></p>
<p class=rvps1><a href="http://digital-flame.ru/wp-content/uploads/2016/08/1.jpg"><img width=700 height=227 alt="1" src="pic1.jpg"></a></p>
</body>

<body>

Разрабатываю небольшой компонент - текстовый редактор DBTextEditor, для своей программы . В базе данные будут храниться в HTML формате в обычном текстовом поле. У меня MySQL, я использую TEXT поле. Изображения будут храниться рядом с EXE - в отдельной папке Pics, а в базе будут только ссылки на изображение - что избавит от раздутия таблиц при использовании BLOB полей. Компонент разрабатываю с помощью фрэйма. То есть, доступ ко всем полям и методам будет примерно таким DBTextEditor.VisualFrame.SomeMethod Выглядит фрэйм примерно таким образом

</body>

Как видно – картинки отображаются адекватно теперь.

Delphi. TRichView. Как добавить изображение и сохранить его в базе в нормальном HTML формате?

MY PROJECTS

Recent Posts

Categories