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
Related
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.
I am trying to flip images whenever user clicks the next button on the web page
Refer https://jsfiddle.net/jonathan668/vwc1hd8z/6/
Issue is My image urls generated via javascript are not loading to html
I tried various options but unable to resolve
I am new to Javascript and CSS also
You don't need to create a new Image object to change the source. Remove line 8 of your JavaScript image5 = new Image(); and it should work perfectly.
I am developing a website and there is an option to upload images, provided with the features to crop it and upload it. Till now it was a separate page but now i want to display it as a link to first page and on clicking the link it should open a new frame (kinda like how facebook opens the images now) and display the options to select the image to upload along with cropping feature.
and i was posting an image here but due to points issue i am not allowed to so if you need to get the image idea just check a photo on your facebook account.
Look at at JQuery Boxy. It makes sense and looks much closer to facebook dialog
As you haven't specified a javascript framework, I thought I would suggest a plain javascript way to dynamically add an iframe to the current document. This is only really applicable if the picture uploading page is on the same server as the site that will deliver the iframe. Otherwise you probably want to use something other than frames...
function showIframe() {
/* Parent element */
var widget = document.createElement("div");
widget.style.position="fixed";
widget.style.top="100px";
widget.style.left="100px";
widget.style.width="300px";
widget.style.height="200px";
/* picture uploading page frame */
var iframe = document.createElement("iframe");
iframe.src = "http://localhost"; // use your picture upload URL here
/* Add to document */
widget.appendChild(iframe);
document.body.appendChild(widget);
}
and in the HTML add an element with a callback that calls showIframe() like:
<a onclick="showIframe()">Picture Widget</a>
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
I have come across html2canvas thanks to a previous question of mine. What I am confused about is how could I implement it to do the following:
Create a live thumbnail of a live website.
When the live thumbnail is clicked it loads a bigger image of the website.
What would be the best way to feed the uri's into the script?
All images will have specific hxw set in the image tag or the css for the specific class.
If the website you are trying to create a thumbnail for is different from the actual page the user is on, you'll need to first download the HTML of the page to your server (same origin), after which you can wrap it inside an iframe and create a screenshot of that.
The screenshot generated will be 1:1 size with the actual site, so to create a thumbnail you'd have to resize the screenshot.
The script doesn't accept HTML, url's or anything else except for DOM elements as an input for rendering a page. As such, the only way you can generate a screenshot using the script is to have it either load on the page where you want the screenshot to be generated or load the page within an iframe (under same origin, so you'll need to download the source through a proxy if you use cross-origin).