Programmatically replace text and image in psd file - javascript

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 ?

Related

jsPDF convert generated pdf to image

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.

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.

How to add watermark to every page pdf file in javascript?

I have pdf file. I want to add watermark in every page. I want to do it using javascript, or using library. How i do that?
i know one of managing pdf file, its called jsPDF. But i dont know how to use it to import existing pdf file, and add watermark.
So, the result is a new pdf file with watermark in every page.
Example add watermark online in this link.
Edit :
That is not answer my question, because i need to import existing pdf file. How?

Image source path is converting into blop instead of real path in tinyMCE editor

I have an issue with latest tinyMCE editor, whenever I try to select and edit the image, it's source is converting into blob path like this.
blob:http://localhost/87d42e34-9961-412c-914b-dc6a77ab68e0
Did anyone of you face this issue or resolved... ?
Please help
When you edit images using the TinyMCE Image Tools you will get one of these encoded images - that is how the Image Tools work.
What you can then do is configure TinyMCE to upload this image and you can store that image as you see fit for your application.
The basic process is that TinyMCE will create a separate HTTP POST for each image that you modify with the image editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location. The TinyMCE page has more details on all of this:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The net here is that the Image tools will create one of these encoded images whenever you edit an image. TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.

How can I access a local file by giving the local file path using HTML/JS/Jquery?

Let's say I've csv file in my C:/test/tes.csv and I've a text box in html file and paste the above path in text box. I've "Load Data" button near by the textbox. when I click on the button I want to alert the content of the file. Insted of default file picker in HTML/JS, there is anyway to load the data? I want to use it in my application.
Please help me to figure out it
You should try and use the FileReader API, which allows you to read the contents of files (or raw data buffers) stored on the user's computer.
Eric Bidelman wrote this awesome article that can help you get started.

Categories

Resources