Develop Reference

How to download a canvas rendered pdf file opening in pdf.js?

I have zero knowledge with regard to coding. I desperately need to download a pdf file which is being shown in the fashion attached to this post. The download button is not working and I've tried everything which I can to download the file. Any help is welcome. Things which I've tried are
Finding file source in network tab under inspect element
Finding any URl leading to the pdf again in the inspect elements tab.
Saving the page as Html, upon which it downloads but never opens again with the pdf required.
Also in my limited research which I could make sense of was, the page used canvas element to render the pdf. Text of pdf is seen to be entered manually in a separate layer.

The address of the pdf being rendered is actually visible in the url on your image.
the ../../ means go up 2 directories.
So that means the absolute url for your pdf is this.
https://www.time4education.com/MoodlePages/catmttt/cat20materialvideos/VAHO1002103.pdf

Loading Images on demand without altering the src attribute

I have a website that 40 babynames are shown in each page, each name have some photos that are uploaded by users. I use iframes to show the images of each name when the user clicks on "show photos button" (iframe is created dynamically after click). Well in this case images are never indexed with search engines.
If I load them right after each name (and not in a iframe) then the page size will be very large and will load very slow.
I'm looking for a way that load images on demand (just as it is now) without using iframes. setting the src on demand will be in-vane as search engines won't have access to them and setting them will make page very heavy as I said before.
Any suggestions on how to do this?

You could use a php script that displays one singe thumbnail (1x1 pixels) when the query string ends on "small"; with ajax you can now access every single image and remove the ending "small" so that the php script uses the original file.
http://php.net/manual/en/function.imagejpeg.php might help ^^
So you access "image.php?myimage.jpg-small" and the script loads the fixed thumbnail that will get cached after the first load. Then, you change the img src property using ajax to "image.php?myimage.jpg" and we're done...
You could use a .htaccess - rewrite for better look of the image source...

You can't really get Google to index the images if they're not there to start with - could you use thumbnails instead for each image avoiding slow loading speeds and allowing Google to index them? Then on click you could replace the src tag with the full size image.
There's libraries like Timthumb that can generate and cache thumbnails for you if you don't want to write all the resizing code.

How to save part of an html page to an image or pdf either on client (javascript) or asp.net on the server side?

Is there a way to implement functionality so that a user can Right click a subsection of an Html page (say a DIV or other container element) so that that part can be saved as an image/pdf (using javascript)?
Alternatively (ideally) can this be done on the server side in ASP.NET?
The use case for this is the following:
I have some complex web pages generated in asp.NET and using the javscript Flot library for the graphs. I would like to reuse part of the html page to generate PDF reports or at least image snapshots which can easily be inserted into reports. I have looked around and it seems there is a tool wkhmltopdf which converts the entire page to PDF, however there are 2 issues:
This tool needs to be run separately, which is not friendly for end users
The tool extracts everything on the page, e.g. menus headers , footers etc.
For the second problem I could generate web pages without the headers/footers and menus, and then use the tool, but this does not solve problem 1. Ideally I would like to generate the report weekly and automatically so the user only needs to download it.
For this purpose what is really needed is some way to store as pdf or image a DIV (or other element) referenced by id. This way I would not need to write separate code to generate the reports. I realize there will be a loss of quality converting html to PDF, but for our purposes, this is not that important.

IECapt# is a new and experimental version of IECapt written in C# to render a web page into a BMP, JPEG or PNG image file.
see http://iecapt.sourceforge.net/
You will have to make some calculations, if you want to crop the captured image to your requirements, or give the tool the html u actually want as an image,instead of the whole page.
Hope this helps.

In case this can help others, I finally settled for the iTextSharp library which is very powerful and also handles svg. It does not do the general html5 to pdf dump but with a bit of code I can do most of what I need.
main website is:
http://itextpdf.com/
download:
http://sourceforge.net/projects/itextsharp/

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

Client-Side script to read and manipulate image from the web (details...)

I want to be able to use a Greasemonkey script that can take an image from a page, scan it for the darkest pixel, and then return those coordinates to the browser.
Originally, I used a flash script... Greasemonkey embedded a local flash file that would fetch the image based on a URL in the source of the webpage, use ActionScript to get the darkest pixel, and then send a POST request with those coordinates as values.
The problem is, I only want to download the image one time. With this method, it does it twice (once in browser, once in flash). Is there a way to manipulate an image from a webpage within Javascript or with another client-side language? I tried using a Canvas, but you cannot perform the getImageData() function on images hosted on remote servers.

You could load it in flash only, and do with your image whatever you want, then if you need to show it in the page you could encode the image as base64 string of the PNG (you will need AS libraries for PNG and base64 encoding).
The next step would be to pass the string to javascript, and in Javascript you could take advantage of the ability to embed base64 images (supported in Firefox, opera, not IE).
The syntax is:
<img src='data:image/png;base64,ABCDE...'>
where "ABCDE..." is the base64 string generated in flash.
This way you would only get the image once, but still will be able to show it as a normal html image.
I used this technique in a pet project i created (www.creationempire.com/tstyles) to generate the images in a online image generator, and got the original idea from http://danielmclaren.net/2008/03/embedding-base64-image-data-into-a-webpage
Hugo