Large JavaScript Modular App loading and un-loading libraries as needed? - javascript

I am creating a JavaScript with PHP Backend Media Manger Library.
Similar to WordPress media manger however there will be about 20 module/plugins for creating/adding new Media.
For example some of the modules:
Extract Frames from an Animated GIF image and upload any of the Frames as a new Image in your media library.
Scrape a webpage for images and upload any of the images to your media library.\
Canvas based Image annotation editor
Markdown File creator and reader
Create animated GIF images using multiple images.
CSS Sprite Image Generator
QRCode Generator
PDF File Viewer
PSD File Viewer
Upload from URL
Drag & Drop Uploader
Paste File Uploader
Upload From Base64 String
...and several more....
The Problem
Now obviously several of these modules will rely on using existing libraries.
In a users application where they are using my Media Manger library, I don't want to bog down the users computer by loading tons of 3rd party JS libraries that all the modules rely on all at once.
How to fix?
Is there a way to load and un-load libraries as they are needed?
My media manger lib will open up in an app as a popup modal. If I was to open the media manger modal as an Iframe, when the modal is closed I could remove the Iframe from the DOM, would this free up all the resources that alll the JS libraries previously loaded had consumed in the browser?

if you do something like delete window.myLibrary then it will delete any code or data present under the myLibrary object (because functions are objects too!), which will be garbage collected and removed. This of course assumes that the libraries you want to un-load are accessible in this way.

Related

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 create a chrome extension code to extract ads from a webpage and save it as an html file?

I am developing a chrome extension for fetching ads from a web page. What I am trying to do is that:
My extension should look for HTML5 banner ads from the opened web page.
It should detach the ad code and save it to my computer as an html file.
The html file created should not depend on an external JS or CSS file. It means when it gets detached, the CSS or JS code attached to it should be detached and saved as a part of the html page (not a hyper link).
I was wondering if there are any existing libraries or open source plugins that do that. If not, can anyone point me in the right direction where to begin?
This won't directly pick out banner ads for you, you'll need to do that yourself, but all the functionality you're hoping for is available using content scripts.

Alloy Editor : upload multiple images on my server from content

Is it possible to upload the multiple images from pasted content of google drive document or local documents i.e articles ?
After pasting the content from document, i want to upload all images on my server
Currently, when i drop/select image (single) in editor area locally then using "imageAdd" event i can upload the image to my server, but same thing when i do by selecting the image (having google image url) from document that time its not working.
want to implement : all images which i have copied in editor which are hosted in different server, need to upload on my server
You need a plugin that detects whenever content is copied into the editor, then find out any external image and then imports them into your server.
This is an example of such plugin https://www.pluginsforckeditor.com/imagesfromserver/ although you can write your own.

Document Viewer in popup angularjs

I want to show all kinds of document like doc,pdf,excel and also images like png or jpeg in popup using Angular js.
I found one solution in java script http://www.aspsnippets.com/demos/1261/ which does same but it not supports excel and doc files.
Is there any relevant way for angular js to do same for all kind images and files?

Adding touch targets over a PDF document in an HTML page

I'm looking to add a degree of interactivity to a set of PDF files that I have, and would like to embed a PDF document in a webpage, and then overlay touch targets to I can make a popop over them.
What would be the best way to make this happen? I briefly looked into Mozilla's pdf.js, but thats more focused on being a full on PDF reader, and has sluggish performance on tablets.
Are there any reliable PDF to HTML libraries/converters that could help me out? The PDF's are fairly basic. More or less just a bunch of images (which are individually selectable in the PDF) in a grid.
At the moment I am opening the PDF in Photoshop, slicing it up, and then exporting it as an HTML table, but I would love something a bit easier to do
I don't see a way around a server-side solution. Here is how I would do it in PHP using ImageMagick:
<?php
$someFile = $_GET['pdf'];
try
{
// Saving every page of a PDF separately as a JPG thumbnail
$images = new Imagick($someFile);
foreach($images as $i=>$image) {
$desiredWidth = 1024;
$image->thumbnailImage($desiredWidth,0);
// Save the file to disk
//$image->writeImage("page".$i.".jpg");
// Or display it from this script:
header('Content-Type: image/jpg');
echo $image;
}
$images->clear();
}
catch(Exception $e)
{
echo $e->getMessage();
}
?>
If your PDF is a single page then that script will just create a single file or if you echo the $image then it will just display that page as a JPG (or PNG or whatever you want). Then you can mark up your HTML around it as needed by including the script as an IMG:
<img src="myscript.php?pdf=somefile.pdf"/>
Now you can have whatever HTML you want over and around the PDF as an image.
I've implemented a commercial solution called PDFWebViewer.NET to view PDFs in the browser a couple of years ago. It uses server side image rendering (.NET) and nothing but HTML and javascript client side.
I think that's as close as you can get to viewing PDF in the browser without any plugins. Since it's all HTML you can overlay pages with divs and hook up actions to that using javascript. In fact, that's how the product renders out links in the PDF documents.
This works really well because by using relative positioning you can make sure the links stay in the right place while panning the document.
The project was recently open sourced but still relies on commercial components. It should not be a lot of work to replace that with open source PDF components.
The project is hosted on codeplex. PDFWebViewer 1 is the first generation, WebViewer 2 is the latest version.
I would advice you to use wkhtmltopdf. It allow you to work bassically with any web content whitch is on the fly converted to pdf format by taking a "snapshot of screen" (simple explanation). For example you can write your own html template just like you would on any website and than populate it with custom data. You can use it generate for example an invoice. Im using it for couple months now and without any single problem.
Its simple shell utility to convert html to pdf using the webkit rendering engine, and qt. And of cource its open source!
Example:
wkhtmltopdf www.myhomepage.com myhomepage.pdf

Categories

Resources