html2canvas - IndexSizeError

Question

我正在尝试获取加载到页面div中的图像，并尝试传入图像的原始数据，或者尝试将图像复制到某个位置。

我能找到的最好的方法是使用html2canvas

在尝试将图像打开到窗口中进行预览时，出现以下错误：

JavaScript运行时错误: IndexSizeError

我读过一些帖子，建议我可以使用以下方法呈现div：

html2canvas($("#mapDiv"), {
            onrendered: function (canvas) {
                // canvas is the final rendered <canvas> element
                var imgData = canvas.GetContext("2d").getImageData(bounds.left, bounds.top, bounds.width, bounds.height);
                var myImage = imgData.toDataURL("image/png");
                window.open(myImage);
            }
        });

问题出现在html2canvas js文件中的以下行

ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);

是否有可能以这种方式呈现动态加载到div中的图像，因为由于用户具有不同的分辨率，我无法传入像素参数

如果有可能，我做错了什么？

Answer 1

function capture(id) {

        html2canvas([document.getElementById(id)], {
            logging: true,
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
                var dataUrl = canvas.toDataURL("image/png")
                //console.log(dataUrl)
                $('#img-out').attr("src", canvas.toDataURL("image/png"));

                $.post("/upload-img", {img: dataUrl, name: id}, function (res) {
                    console.log(res) 


                    location.href = $("#" + id).attr("shareUrl") + "&picture=" + (window.location.protocol + "//" +window.location.host + "/" + res.filePath)

                } )
            }
        });
    }

传递您想要快照的元素的id。