jsPDF convert generated pdf to image - javascript

I am using React and I am creating PDF's using JSPDF.
I need to convert the generated pdf into an image (NOT SAVE/DOWNLOAD) so that one of my react components can display the generated pdf as an image.
I don't want to open in a new window using doc.output('dataurlnewwindow') or open in an iframe in some react component.
I want to display the generated PDF as an image.
I tried googling but no luck, most answers deal with converting an image to a pdf which I know how to do but I am trying to do the reverse.
I have tried taking the output as a dataurl/uri like so:
const pdfAsImg = doc.output('datauri')
and then setting that as the src of an img element like so:
<img src={pdfAsImg}>
but doesn't seem to work.
Not sure what to do, any help is much appreciated.

Related

Programmatically replace text and image in psd file

I have a psd file provided by a designer.
I would like to use this psd file as a template to generate images.
I tried to use psd.js to make the changes in a react application. I successfully read the file, parsed it and found the text layer I was searching for but i wasn't able to change the text and generate an image with my changes.
What I'm trying to achieve is to have a website where a user can directly update the text and export the result into an image.
Do you have any idea how I can achieve this ?

Save some space with jsPDF?

I use jsPDF to make PDFs using svg2pdf. I have lots of pages, and each page has the same background content (images text paths etc).
The images in particular account for a huge amount of the file size. Because all my images are base64 encoded, svg2pdf always makes a new entry for the same image on each page. I want my images (or all items for that matter) to be added to the File Stream once and then referenced on each page.
Is there a way I could modify svg2pdf (which was really made for single page PDFs but I have got it to work for multiple pages) or jsPDF to add this feature?
Related: Pdf file size too big created using jsPDF
Why not put the files in the library and go there with image?
Maybe I didn't understand the question, if so, please.

Get image from webpage via javascript to display

I have an application that loads an image - the URL of the image however is dynamically generated.
The image URL would look like this (I get the image name through their API):
http://openweathermap.org/img/w/10d.png
That URL is created in javascript - how would I make javascript actually get the image from that URL and return the .png so I could display it?
Would ajax be best for this? The solution would have be in regular javascript as the application displaying the image only allows for basic javascript.
Edit: This is for a digital signage solution - so I need to get the .png file into javascript where I will return ThePicture so the signage can display it appropriately. So unfortunately, just adding it to the/a DOM won't work.

Inject an html table into an image available as an ArrayBuffer

Basically I want to go from here (available as an ArrayBuffer):
to here: (also available as an ArrayBuffer)+
So it's
ArrayBuffer -> Image -> Image with overlay -> ArrayBuffer
in javascript only without showing anything to the user.
If possible, I want to generate that table using html (still without showing anything to the user).
I had that idea of displaying an invisible Chrome Appwindow to render the page with the image as its background just to export it using the html2canvas library.
However, there has to be a better approach to this ...
Does anyone have an idea of how to implement such a functionality?

Putting a image in a pdf generated with jsReport

I need to generate a PDF with an image in the background.
To generate the PDF I'm using jsReport.
I'm using the HTML tag image <img src="Content/img/boleta2.png" /> and this is working great, because when I open this in Firefox, the image shows up.
But when I generate the PDF, only shows the HTML without any image.
In the official page http://jsreport.net/learn/images
it says something like "To upload an image you can use simple http POST...."
But I don't understand this very well.
Content/img/boleta2.png seems like a relative path to somewhere. In every case jsreport has no idea what is the full path.
You can use html base tag to specify the root path http://www.w3schools.com/tags/tag_base.asp
Or you can use full path directly in the img src.
The image extension is used for uploading images directly into the jsreport storage where it can be later referenced. Image is uploaded usually from html jsreport studio, the mention about http POST is about using API what is an advanced use case you probably don't struggle with right now.

Categories

Resources