Open Seadragon: Download currently displayed image in Viewer - javascript

I'm using Open Seadragon and loaded multiple images into the viewer with
tileSources: ['http://url.com',
'http://url.com',
'http://url.com',],
The files that I linked in tileSources are all json but I want to download a jpg image.
How can create a function that downloads the currently viewed image?

Do you want the exact view that's in the viewer at this moment? If so, you can copy the contents of the HTML canvas at viewer.drawer.canvas.
You might also check out https://github.com/KTGLeiden/Openseadragon-screenshot.
If you want the full high-resolution version of the image (not just what's in the viewer at the moment), I'm not aware of anything that does that.

Related

Display PDF like on web

I am trying to display PDF file on the web without download option and copy option.
Then I found this https://books.google.co.in/books?id=kwBvDwAAQBAJ&printsec=frontcover&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false
Can you tell me how can I achieve this on my website?
What mplungjan said in his comment is correct. Anything that is put on the web can be copied one way or another. It appears that the google site you linked to is just showing an image of each page (see https://books.google.co.in/books/content?id=kwBvDwAAQBAJ&pg=PP1&img=1&zoom=3&hl=en&sig=ACfU3U0s8V3HjcApLeNwIGStMQlzZFaotA) with transparent pixels over each image to make it so you can't right-click to save the image. But it's easy to see what they're doing by viewing the source in the inspector.
If you don't want your users to be able to download the entire file, you could break it up into multiple small files (or images, like google is doing in your link) that would make it a little harder for them to get the files. But you can't really stop them from downloading anything.

Refreshing a particular div content using javascript / jQuery

I have a JQuery div element. It displays a picture on the screen. The image is stored in the device memory and is being replaced in continuous interval (with same file name)
Once the image is displayed It's stuck there, I want it to load the latest image ( saved on the memory) by itself when ever I visit this div back in any given time.
Im using javascript to develop this App.
Any little help is appreciated.
[update]
This is my code, just the standard way to display the image.
<img src="/storage/emulated/0/Images/1.png" width="128" height="128">
The image 1.png will be replaced in regular intervals. I want this to be updated on the screen.
What you get from sdcard is a FILE_URI object such as (file://storage/emulated/0/Images/1.png) or you get DATA_URL object which is just the Base64 converted string of above.The html img tag accept FILE_URI and DATA_URL directly.
Since cordova camera plugin just allow user to select a image to view/edit or click a image then we can use cordova file plugin to create a functioning gallery app.
add cordova file plugin to your project:
cordova plugin add cordova-plugin-file
Then create a handler to provide you the path of the images(Syntax):
window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function
(dirEntry) {
console.log('file system open: ' + dirEntry.name);
var isAppend = true;
createFile(dirEntry, "fileToAppend.txt", isAppend); }, onErrorLoadFs);
For details of this plugin:https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/
You can download test gallery app showing images from DCIM/Camera folder(default) into html img tag onto user screen:
https://drive.google.com/open?id=0B8vJcyO8_PK9R1k4STUyaEJQS1k

Exporting HTML canvas from inside of Chrome extension

I'm writing a Chrome extension where a canvas is modified, and I want to have the option to save the canvas data as an image. Is there any way for me (using JavaScript) to save directly to the file system (ideal) or at least prompt the user with a download menu so they can save it themselves?
There seems to be no way to do this except for these ideas:
Online backend written in PHP or something
An iframe to show the online website which would have the canvas on it
Tell the user to right click and save the canvas image

javascript / html / other programming language in PDF file

Is it possible to embed code inside a PDF document ?
I'm interested in creating a PDF document with a dynamic image,
so once a user will open the PDF in a certain time he will get to see image 1 and on a different time he will get to see image 2
(both images source will be on the web and will require HTTP transfer).
Looks like it is possible but it does not seem trivial:
PDF with dynamic image

How to display a pdf file on tool tip using jquery

I have a link as:
PDF
I want to set a tooltip for this link and in tooltip display the same pdf file.
That means i want to display the contents of testpdf.pdf file in tooltip when mouse over the link.
I searched that for in google, but there have no link siutable for me.
There have a lot of model for image ,text in tooltip.
How can I do this?
Anyboady have any solution?
Displaying a PDF generally involves launching a browser plugin, such as Adobe Reader, which has its own menu bar, toolbar, and so on. Cramming that into a small space like a tooltip probably isn't very practical.
You'd be better off rendering a thumbnail image — maybe use a PDF library on the server for this — and showing that in the tooltip.
You can try pdf.js
It renders PDF files onto canvas..
But in my opinion it is not a good solution at all, when the PDF is big, it will take some time to load it into the tooltip..Better is to create a thumbnail on the server and display it as a standard image..
Here is how to do that with PHP
I think that requires the browser to have a plugin to display PDF inline instead of downloading it. Once this is ensured, you can set the target of your tooltip to the URL pointing to PDF. What tooltip library are you using, btw?

Categories