在 UWP 的 WebView 中停止 GIF 动画答案

【问题标题】：Stop GIF Animation in WebView of UWP在 UWP 的 WebView 中停止 GIF 动画
【发布时间】：2021-09-22 11:02:53
【问题描述】：

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

【问题讨论】：

标签： animation webview uwp gif

【解决方案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 });
 }

【讨论】：