Page 1 of 1

Passing Image to jsPDF

Posted: Thu Jul 30, 2020 10:02 am
by KianV
I am using jsPDF to generate a downloadable file and am fine with adding text, but cannot work out how to add an image (created within the code) to it.
If I have a local file I can just use:

Code: Select all

!doc.addImage("dino.png",20,20,100,100)
I have tried replacing the filename with both the Image# and the ImageID, but they didn't work.
Any guidance would be greatly appreciated.

Re: Passing Image to jsPDF

Posted: Thu Jul 30, 2020 10:48 am
by Peter

Code: Select all

EnableExplicit

Procedure Main()
  
  Protected k
  Protected Text$
  
  ; CreateImage - Code (from SB-Help)
  
  OpenWindow(0, 100, 200, 300, 200, "2D Drawing Test", #PB_Window_TitleBar)
  
  ; Create an offscreen image, with a green circle in it.
  ; It will be displayed later
  
  If CreateImage(0, 300, 200)
    If StartDrawing(ImageOutput(0))
      Box(0, 0, 300, 300, RGB(230,230,230))  ; Set the background to white
      
      Circle(100,100,50,RGB(0,0,255))  ; a nice blue circle...
      
      Box(150,20,20,20, RGB(0,255,0))  ; and a green box
      
      FrontColor(RGB(255,0,0)) ; Finally, red lines..
      
      For k=0 To 20
        LineXY(10,10+k*8,200, 0)
      Next
      
      DrawingMode(#PB_2DDrawing_Transparent)
      BackColor(RGB(0,155,155)) ; Change the text back and front colour
      FrontColor(RGB(0,0,0)) 
      Text$ = "Hello World !"
      
      LoadFont(0, "times", 30)
      DrawingFont(FontID(0))
      
      DrawText(10, 150, Text$)
      
      StopDrawing()
    EndIf
  EndIf
  
  ; Create a gadget to display our nice image
  ImageGadget(0, 0, 0, 300, 200, ImageID(0))
  
  
  ; ########################################
  ; # this is the important part:  
  ; ########################################
  
  Protected GID
  
  GID = GadgetID(0)
  
  ! var doc = new jsPDF();
  ! doc.addImage(v_gid.image.toDataURL(), 0, 0, 300/3, 200/3); // <-! v_gid.image.toDataURL()
  ! doc.save();
  
EndProcedure

; load jsPDF:
! require(["https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"], function(J) {
!   jsPDF = J;

Main()

! });
Greetings ... Peter

Re: Passing Image to jsPDF

Posted: Thu Jul 30, 2020 11:07 am
by KianV
That's perfect. Thanks Peter :D

Re: Passing Image to jsPDF

Posted: Sun Aug 02, 2020 8:31 am
by KianV
The final result: https://tinyurl.com/yfrzaxkq
A simple, but sufficient for my needs, playing card tuckbox maker, which allows adding images to each face.
For non-French speakers:
The sizes are: width, height, depth.
The image selection is, from top to bottom: front, back, left, right, top, bottom.
The button at the bottom of this area will remove all the images.
A folded base is 'Plié', while a glued one is 'Collé'.
The checkbox at the top turns the fold lines on and off.
The background colour can be set using the colour picker above the preview image.