在 UWP 的 WebView 中停止 GIF 动画

Posted 2023-03-25

【中文标题】在 UWP 的 WebView 中停止 GIF 动画

【英文标题】：Stop GIF Animation in WebView of UWP

【发布时间】：2021-09-22 11:02:53

【问题描述】：

我在我的 UWP 应用程序中使用 webview，其中将提供来自外部 web 的 gif 图像。有一个要求，我需要在页面停留 5 秒后停止 GIF 动画。我怎么能做到这一点？？？我一直在寻找注入 Java Script，但找不到实际的方法。有人可以帮忙吗？？？

【参考方案1】：

对于这种情况，一种常见的解决方法是使用带有 javascript eval 函数的 InvokeScriptAsync 来使用 html 事件处理程序

要停止 Gif，您可以使用以下 javascript 方法。

 [].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);
     
 

并在页面导航完成 5 秒后使用 eval 函数注入它。

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