Stop GIF Animation in WebView of UWP - animation

Question

I am using a webview in my UWP application where a gif image will be provided from external web. There is a requirement that, I need to stop the GIF animation after staying 5 seconds on the page. How can I accomplish this??? I was looking for injecting Java Script, but couldn't find out the actual way . Can anyone help please???

Answer 1

For this scenario, a common workaround is to use InvokeScriptAsync with the JavaScript eval function to use the HTML event handlers
For stopping Gif, you could use the following javascript method.
[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);
function is_gif_image(i) {
return /^(?!data:).*\.gif/i.test(i.src);
}
function freeze_gif(i) {
var c = document.createElement('canvas');
var w = c.width = i.width;
var h = c.height = i.height;
c.getContext('2d').drawImage(i, 0, 0, w, h);
try {
i.src = c.toDataURL("image/gif");
} catch (e) {
for (var j = 0, a; a = i.attributes[j]; j++)
c.setAttribute(a.name, a.value);
i.parentNode.replaceChild(c, i);
}
}
And inject it with the eval function 5 seconds after the page is Navigation Completed.
private async void MyWebView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
await Task.Delay(TimeSpan.FromSeconds(5));
var function = #"[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);
function is_gif_image(i) {
return /^(?!data:).*\.gif/i.test(i.src);
}
function freeze_gif(i) {
var c = document.createElement('canvas');
var w = c.width = i.width;
var h = c.height = i.height;
c.getContext('2d').drawImage(i, 0, 0, w, h);
try {
i.src = c.toDataURL('image / gif');
} catch (e) { // cross-domain -- mimic original with all its tag attributes
for (var j = 0, a; a = i.attributes[j]; j++)
c.setAttribute(a.name, a.value);
i.parentNode.replaceChild(c, i);
}}";
await MyWebView.InvokeScriptAsync("eval", new string[] { function });
}