We Keep Coding

How to reload base64 animated GIF?

I use base64 animated GIF on my web page, when I try to reload page GIF still show last frame. How can I reload GIF from its beginning?
I tried use JS to clear innerHTML and then assign it back to my base64 GIF, but nothing happened.
I am also using C# and CefSharp (tried use Refresh() and chromeBrowser.GetBrowser().Reload()), would be great to get any tips how to make GIF play from its beginnig.
I use base64 because I cannot store image on users hard drive or Web, but I need to put this image into HTML, which can be loaded by CefSharp using C#. If there are any other ways to use animated image in HTML without storing it on HDD or web, please give me some tips too.
Update:
I decided to leave base64 because big size of my gifs (>25 Mb) cause lags and problems with reload.
I use CEFSharp v55-pre01 and found new problem.
What do I have:
Main menu
Form 1 (with cefsharp browser, which loads gif by code automatically)
Form 2 (with cefsharp browser, loads same gif)
From main menu I call Form 1, when Form 1 initialize, Form 1 create hidden Form 2.
First form initialize Cef
if (!Cef.IsInitialized)
{
Cef.Initialize(settings);
}
Each form in constructor initialize own browser
chromeBrowser = new ChromiumWebBrowser("");
Controls.Add(chromeBrowser);
Problem appear in situation, when I close second form (no mater is 2nd form shown or not) and dispose both forms and call Cef.Shutdown(). When I try open back first form from menu my app crashes.
Error appear at second form constructor on line chromeBrowser = new ChromiumWebBrowser(""); with such text:
An unhandled exception of type 'System.AccessViolationException'
occurred in CefSharp.Core.dll
Additional information: Attempted to read or write protected memory.
This is often an indication that other memory is corrupt.

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

How to display data as a pop up or as second layer?

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>

How do I reload an <img/>?

I have a WebBrowser control on an WPF page. The HTML page loaded into the WebBrowser control displays images for the WPF application. I have a JavaScript callback from the WPF page into the HTML page telling the page that the images have changed and to reload images. I can't seem to find any way to tell the browser that the underlying file in the tag has changed.
How do I reload the img?
I've tried just changing the src attribute and I've also tired things like this:
$("#img1").attr("src", "");
$("#img2").attr("src", "");
$("#img1").attr("src", image1);
$("#img2").attr("src", image2);
The first time the function is called the images are displayed. When the image is changed and the function is called again, the original image remains.

Set the source new with a random query part. E.g. img.png?0001 and so on
With this trick every call has a new url and the browser control cannot annoy you with caching stuff.

Passing a unique querystring parameter will force the image to reload. Many sites and libraries (example) use this technique to ensure a fresh copy of a resource is displayed:
$("#img1").attr("src", image1 + '?_=' + new Date().getTime());
$("#img2").attr("src", image2 + '?_=' + new Date().getTime());
You'll need to add additional logic if your image1 or image2 links already have querystrings.

HTML5 Canvas Example Screenshots

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).