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