question

MdNiazMahmud-0233 avatar image
0 Votes"
MdNiazMahmud-0233 asked MdNiazMahmud-0233 edited

[UWP] Stop GIF Animation in WebView of UWP

Hi, 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???

windows-uwp
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

NicoZhu-MSFT avatar image
1 Vote"
NicoZhu-MSFT answered MdNiazMahmud-0233 edited

Hello, Welcome to Micorosoft Q&A,


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 });
 }





If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you @NicoZhu-MSFT . It works. But, I was trying to stop GIF as GIF was increasing main memory occupation. By, BitmapImage.Stop() in Normal UWP page scenerio, it does decrease memory occupation. But, In this case of stopping GIF by Java Script injecting does not decrease memory occupation. :( If you know anything regarding this, please share, I will be much grateful.

0 Votes 0 ·