Drawing image on to TBitmap canvas does not work

WEB TMS WEB Core
1

I am trying to transfer the frame contents of the TWebMediaPlayer to a TBitmap so I can maninpulate the pixel data. Drawing onto the Canvas of the TBitmap does not seem to work. However, doing the same on to a TWebPaintBox seems to work. Any Thoughts?
FAviBitmap: TBitmap;
VectorOverlay: TWebPaintBox;
FAviBitmap.Canvas.Context.drawImage(MediaPlayer1.Element, 0, 0, FAviBitmap.Width, FAviBitmap.Height); <-- Does not work
VectorOverlay.Canvas.StretchDraw(PtsR, FAviBitmap); <-- Does not work

VectorOverlay.Canvas.Context.drawImage(MediaPlayer1.Element, 0, 0, VectorOverlay.Width, VectorOverlay.Height); <-- Works

2

In a browser, a graphics context needs to be created on a HTML CANVAS element which TBitmap is not using.
I suggest you create a TCanvas directly, do the painting on the canvas and then transfer to a bitmap with TBitmap.LoadFromCanvas()

3

Bruno,
I tried the LoadFromCanvas, it does not seem to work either. Using the TBitmap as interim storage does not seem to work. Something like below.
PBOverlayLeft: TWebPaintBox.
w = this.MediaPlayer1.FElement.videoWidth;
h = this.MediaPlayer1.FElement.videoHeight;

c := TCanvas.Create;
c.Context.canvas.width := w;
c.Context.canvas.height := h;

FBitmap.Width  := w;
FBitmap.Height := h;

c.Context.drawImage(MediaPlayer1.Element, 0,0, w, h);
FBitmap.LoadFromCanvas(c);
PBOverlayLeft.Canvas.StretchDraw(PtsR, FBitmap); <-- Image not updated / No errors
Tried also:
FAviBitmap.Canvas.Context.putImageData(c.Context.getImageData( 0, 0, w, h), 0, 0); <-- does not work

PBOverlayLeft.Canvas.Context.putImageData(c.Context.getImageData( 0, 0, w, h), 0, 0); <-- Image is painted on canvas.

I am really stumped.

4

LoadFromCanvas() is internally asynchronous (due to the way the browser handles assigning images). So, do further processing from the bitmap.OnChanged event.
Example project
Project1.zip (5.4 KB)

5

Bruno,

It turned out that there is a bug in the StretchDraw procedure for the TCanvas. Did not have to use LoadFromCanvas. It worked as I originally coded after fixing the StretchDraw. I changed to match the Draw procedure which worked. See below for changes.

procedure TCanvas.StretchDraw(Rect: TCanvasRectF; Graphic: TGraphic);
var
  img: TJSObject;
begin
  if Assigned(FContext) then
  begin
    img := Graphic.Image;
    if Assigned(img) then
    begin
      if Graphic.FUsedCanvas then
        FContext.drawImage(TJSObject(Graphic.FCanvasElement), 0, 0, Graphic.width, Graphic.height, Rect.Left, Rect.Top, Rect.Right - Rect.Left, Rect.Bottom - Rect.Top)
      else
        FContext.drawImage(img, 0, 0, Graphic.width, Graphic.height, Rect.Left, Rect.Top, Rect.Right - Rect.Left, Rect.Bottom - Rect.Top);
    end;

  end;
end;
6

Good catch!
Thanks
we'll adapt this accordingly and this will be included in the next update