Passing Image to jsPDF

Using Javascript from SpiderBasic
KianV
Posts: 21
Joined: Sun Nov 17, 2019 11:38 am

Passing Image to jsPDF

Post 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.
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Passing Image to jsPDF

Post 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
KianV
Posts: 21
Joined: Sun Nov 17, 2019 11:38 am

Re: Passing Image to jsPDF

Post by KianV »

That's perfect. Thanks Peter :D
KianV
Posts: 21
Joined: Sun Nov 17, 2019 11:38 am

Re: Passing Image to jsPDF

Post 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.
Post Reply