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

Passing Image to jsPDF

by KianV Thu Jul 30, 2020 10:02 am

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: 759
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Re: Passing Image to jsPDF

by Peter Thu Jul 30, 2020 10:48 am

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: 6
Joined: Sun Nov 17, 2019 11:38 am

Re: Passing Image to jsPDF

by KianV Thu Jul 30, 2020 11:07 am

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

Re: Passing Image to jsPDF

by KianV Sun Aug 02, 2020 8:31 am

The final result: https://tinyurl.com/y66bylel
A simple, but sufficient for my needs, playing card tuckbox maker.
Return to Javascript

Who is online

Users browsing this forum: No registered users and 3 guests