Question

我有一个div想要截图并保存，

这是我的代码

     update table esg.client_user_pref 
 set pref_value = '15'
 where client_user_id = 
 (select U.CLIENT_USER_ID from esg.CLIENT_USER U where U.USER_NAME='CorpESignClientUser') 
 and pref_entity = 'UsageMode' and pref_attrb = 'ExpirationAfterDay' ;

function _download(uri, filename)
{
    var el = $('.sf-download-button');
    if (el.length)
    {
        var link = document.createElement('a');
        if (typeof link.download === 'string')
        {
            link.href = uri;
            link.download = filename;
            document.body.appendChild(link);

            //simulate click // this causes page to download an empty html file not sure why
            link.click();

            //remove the link when done
            document.body.removeChild(link);
        }
        else
        {
            window.open(uri);
        }
    }
}
function _save()
{

    window.takeScreenShot = function ()
    {
        var a =document.getElementById("my-div");
        html2canvas(document.getElementById("the-div-that-i-want-to-screenshot"), {
            onrendered: function (canvas)
            {
                document.body.appendChild(canvas);
                a.append(canvas);

            },
            width: 220, 
            height: 310 
        });
    };


    $("#btnSave2").click(function ()
    {
        html2canvas(document.getElementById("data"), {
            onrendered: function (canvas)
            {
                _download_card(canvas.toDataURL(), 'save.png');
            }
        });
    });
}

这是我从网上得到它的代码并添加了一些我自己的东西。我正在工作。但是现在，当我点击按钮向我展示图像时，它创建的图像我可以看到它但它只是空白。

我尝试了jsfiddle的所有可能的代码组合以及所有这些，并且结果不能得到任何不同。

这里可能出现什么问题？

Answer 1

我只需更改浏览器即可解决问题，

它不适用于Chrome，但在Mozilla上运行完美。

我也将代码更改为

 $("#btnSave").click(function() {
    html2canvas($("#card"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            // Convert and download as image
            $("#img-out").append(canvas);
            // Clean up
            //document.body.removeChild(canvas);
        }
    });
});

仅适用于Mozilla。

html2canvas - 截屏的画布始终为空/空白

1 个答案: