从 API 获取并显示在屏幕上的图像/图片在截屏和通过社交媒体分享时不会被捕获

Question

目前我正在开发我的适用于 android 的 cordova 应用程序，我需要一个截屏并在社交媒体上分享的功能。所以我使用了几行代码，它通过截屏并在社交媒体上分享来工作，但它没有捕获来自 API 并显示在屏幕上的图像/图片，换句话说，它不包括从 API 获取并显示在屏幕上的图像/图片，并对屏幕上剩余的内容进行截图。任何人都可以帮助我提供解决方案，以正确截取屏幕上显示的图像和内容并通过社交媒体分享。提前谢谢..！

这是我的代码

HTML

      <div class="toolbar hideonshare" data-html2canvas-ignore="true" >
      <a href="#" class="link ">
      </a>
      <a  class="link" onclick="reportss();" >
      <img  src="img/share.png" alt="Smiley face" height="42" width="42">
      </a></div>
      <div class="screen"></div>

JQUERY

         function reportss() 
            {

                $(".hideonshare").hide();
                let region = document.querySelector("body");
                    html2canvas(region, {
                    onrendered: function(canvas) {
                        let pngUrl = canvas.toDataURL();
                        let img = document.querySelector(".screen");
                        img.src = canvas.toDataURL("image/png");   
                        window.plugins.socialsharing.share("Download our app", 'Android filename', img.src, null);
                    },
                });

            }

<script type="text/javascript" src="js/SocialSharing.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

Answer 1

它不显示的原因是因为您将 div 元素视为 img 元素

改变

      <div class="screen"></div>

到

      <img class="screen"></img>

已编辑：

试试这个代码

function reportss() {

$(".hideonshare").hide();
var region = document.querySelector("body");
html2canvas(region, {
    logging: true,
    letterRendering: 1,
    useCORS: true,
    onrendered: function(canvas) {
        var pngUrl = canvas.toDataURL();
        var img = document.querySelector(".screen");
        img.src = canvas.toDataURL("image/png");
        window.plugins.socialsharing.share("Download our app", 'Android filename', img.src, null);
    },
});}