[Pas2js] Error Picture.Data Access Violation

[warleyalex]

TWebImageControl can display an image on the Lazarus form. TWebImageControl
is similar to a LCL TImage.

TImage is written using DefineProperties, i.e. it needs TReader and a binary
stream to read. The pas2js classes units don't have a TStream mechanism to
read files like Lazarus. The serialization LFM to PAS we have an output like
this:

  with WebImageControl1 do begin
    Name:='WebImageControl1';
    Parent:=Self;
    Left:=160;
    Height:=16;
    Top:=104;
    Width:=16;
    ExecCustomCSP(Picture,[ { data of the Picture.png here is packed } ]);
  end;

So, this needs a replacement. Instead of "ExecCustomCSP" the serialization
should emit something like:
Picture.LoadFromFile('Picture.png');

The issue is no record is kept of where the image originated. You'd need to
track them. You'd typically use a variable at the same scope at the image
control to store the filename. So, the TWebImageControl have the URL
property, I can use this property to store the path/filename of the image
like this:

  with WebImageControl1 do begin
    Name:='WebImageControl1';
    Parent:=Self;
    Left:=160;
    Height:=16;
    Top:=104;
    Width:=16;
    URL:='Picture.png';
    Picture.LoadFromFile(URL);
  end;

Until here, everything is working as expected! We can compile the project,
see a picture on the form etc.

When I re-open the pas2js project, I've got a AV: 

"Error reading the Picture.Data" - Stream position: 1078

Uh, I can not re-open the project because the LFM file contains something
related to the
Picture.Data property. If I edit the LFM file and remove the entirely the
Picture.Data property I can re-open the project again, but of course I can
not see the picture of the form designer!

----- // unit1.lfm //-------------------
object WebForm1: TWebForm1
  Left = 249
  Height = 240
  Top = 250
  Width = 320
  Caption = 'WebForm1'
  ClientHeight = 240
  ClientWidth = 320
  object WebImageControl1: TWebImageControl
    Left = 160
    Height = 16
    Top = 104
    Width = 16
    URL = 'Picture.png'
    Picture.Data = {
      1754506F727461626C654E6574776F726B477261706869634903000089504E47
      0D0A1A0A0000000D49484452000000100000001008060000001FF3FF61000000
      0467414D410000AFC837058AE90000001974455874536F667477617265004164
      6F626520496D616765526561647971C9653C000002DB4944415478DAA5935B48
      54511486FFE3351D276DECE28CC934CE8894A6293981A960299498454305064A
      F420646205DD43B187A01E2C525023220D24499D20082AB45299F018159A9533
      5E52F352E3A4A6E3E89CCB6E9F63F9D0E5A5161C3667EFBDBEB5D6BFD6660821
      F81F637E0598AA7AF49CC867135ECC597073213C1141208E03628DC08BB52D67
      12FBFE0AD853F9DEE4767365BA40A2366A83B0DCC753DE9F76F168B57D46D7A8
      738C7A14B025DB1B7E036455749BDC2EAE3A3DC25F111DAAC488C38DF1691704
      9120D0DF139AC065B04DCCC0DCD4E7841772D96B590D4B805DE55DE11CC7B7A6
      1B149AC81025D88129F03C8758ED0A809EBF1A9804E3C1204A1D80E1C919DC7F
      6C1B051193D91BFBFB65C08EEBAF8B740A529219AB81C5EA80C0F172E492EC68
      39BB0BB56F2808F0F1F2408C568587AC153D9DF6E28E3B072FCA806D575FDA72
      625619665D1C861CB3D4990A47BF78BD4AF243BB757CB1607A5713AC842AD017
      B76E5A7AD9BA43113220E99265EE649AD68FB54EC0E5E6C1099C0C28CF4B9401
      F9156DF23FAD18DE5E0C5236AEC5E5D287AE8EFA23FE32C058FC6CEEDC4E83DF
      0B9B034E97935E265230E4676CC0BA354A9CA8A200BA21C1BC69635237EB70E5
      CA035787B9E027A0C99697A23538A6DD18B67F8320F01069C4A399D1D051510B
      CB9FD3F4A57920584D4B08A55DAAA96AEE651B0B174B309E7D54B45EED5B9211
      A743DBDB112AA280DD895AA4C587C183AADFD96747691D2B8980AD9B7468B258
      31F06EB0986D3CB628A2F1F8FD702CF0AD99A9068D4EA5405BF727F052270401
      84AEE447F4B8C8304C700B7872AF7594019259F3A9FEA5414A387CD74466E6AB
      33F6462BC2572AF161D00EFBD71988BC0855903F22C282F1716A16CDF54F9D60
      BC73A973C36FA39C70E0B609C45DA68F52AB93B6E8111CE023A7FD657A1E2D96
      1E0C75DBC618C6A380359F6EF8E35B90CCB8AF524F88904D45CB81381F2289C7
      308C3408350CB8DA76F3F9BF3FA67FB1EFC2FB85F0224E28940000000049454E
      44AE426082
    }
  end
end
------------------
It compiles as expected, actually, only the URL property is required (to
retrieve the filename).
----// -----------------------------------------------------------
  var $with1 = this.WebImageControl1;
  $with1.SetName("WebImageControl1");
  $with1.SetParent(this);
  $with1.SetLeft(160);
  $with1.SetHeight(16);
  $with1.SetTop(104);
  $with1.SetWidth(16);
  $with1.SetURL("Picture.png");
  $with1.FPicture.LoadFromFile($with1.FURL);
------------------------------------------------------------------
But at design time, I can not re-open the project,  have to remove the
Picture.Data so,
it can not display an image on the form.

Any idea?



--
Sent from: http://pas2js.38893.n8.nabble.com/