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

问题描述

目前,我正在开发我的适用于 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>

查询

         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>

标签: androidjquerycordovascreenshothtml2canvas

解决方案


它不显示的原因是因为您将 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);
    },
});}

推荐阅读