Is There a Workaround to DrawingBuffer() Command?

[cameo]

Hi Everyone,
The command DrawingBuffer() is not implemented in SpiderBasic. While I am new to SpiderBasic, I have used PureBasic for many years and I have come to rely on DrawingBuffer() for direct access to the pixels in an image or screen. I know that there is the Point(x,y) command but I need fast access to all the pixels for applications such as image processing (eg. filters). Is there any way, say using Javascript commands, to access the pixel data pointer to a SpiderBasic Image?
Many Thanks

Hi Fred,
Do you have plans to expose the DrawingBuffer() pointer in an upcoming SB update? If so, how soon?
Many Thanks

[Dirk Geppert]

Maybe this will help you?

Code: Select all

; Demo: Pixel-Buffer einer SpiderBasic-Image via Inline-JS anfassen

;EnableExplicit

Enumeration
  #Img
  #Win
  #Canvas
EndEnumeration

; 1) Arbeitsbild erzeugen und befüllen
CreateImage(#Img, 320, 240, 24)

If StartDrawing(ImageOutput(#Img))
  Box(0, 0, OutputWidth(), OutputHeight(), RGB(40, 60, 100))
  DrawingMode(#PB_2DDrawing_AlphaBlend)
  For i = 0 To 200
    Circle(Random(OutputWidth()-1), Random(OutputHeight()-1), 6, RGBA(Random(255), Random(255), Random(255), 200))
  Next
  StopDrawing()
EndIf

; 2) Optional anzeigen (Fenster + Canvas)
OpenWindow(#Win, 0, 0, 340, 260, "SpiderBasic Pixel-Access", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
CanvasGadget(#Canvas, 10, 10, 320, 240)

If StartDrawing(CanvasOutput(#Canvas))
  DrawImage(ImageID(#Img), 0, 0)
  StopDrawing()
EndIf

; 3) Das zugrunde liegende Canvas der Image holen
Define imgCanvas = ImageID(#Img)  ; <- liefert im Web das <canvas>-Element

; 4) Inline JS: RGBA-Buffer greifen, bearbeiten, zurückschreiben
;    (Hier zwei Filter als Beispiel: invert und grayscale)
EnableJS
(() => {
  const canvas = v_imgcanvas;                               // ImageID(#Img) -> <canvas>
  const ctx     = canvas.getContext('2d', { willReadFrequently: true });
  const w = canvas.width, h = canvas.height;

  // kompletten Pixelpuffer holen
  const imgData = ctx.getImageData(0, 0, w, h);
  const data = imgData.data;                                // Uint8ClampedArray [R,G,B,A,...]

  // --- Beispiel 1: invert (sehr schnell) ---
  for (let i = 0; i < data.length; i += 4) {
    data[i  ] = 255 - data[i  ];  // R
    data[i+1] = 255 - data[i+1];  // G
    data[i+2] = 255 - data[i+2];  // B
    // A unverändert
  }

  // --- Beispiel 2: optional: einfache Graustufe ---
  // for (let i = 0; i < data.length; i += 4) {
  //   const y = (data[i] + data[i+1] + data[i+2]) / 3 | 0;
  //   data[i] = data[i+1] = data[i+2] = y;
  // }

  // zurück ins Canvas schieben
  ctx.putImageData(imgData, 0, 0);
})();
DisableJS

; 5) Anzeige aktualisieren
If StartDrawing(CanvasOutput(#Canvas))
  DrawImage(ImageID(#Img), 0, 0)
  StopDrawing()
EndIf

[cameo]

Hi Dirk,
Thank you for your code, it is very helpful. I was in fact exploring similar code approaches but seeing it all put together is very useful. With regard to execution speed, I made some quick comparisons and the inline JS approach is amazingly fast. Now that I know this approach is fast enough, I can delve further into the details of using Javascript for graphics processing. Thank you again.
regards,
John