如何使用外部图像生成 html div 的“屏幕截图”？

Question

我有一个带有外部图像的 HTML div。 （以下是一个示例，但在实际情况下我使用的是 Amazon S3，因此无法将图像下载并存储在同一台服务器上）目前我正在使用 html2canvas 将 div 转换为图像。然而，外部图像总是被空白所取代。

我用来捕获图像的代码：

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

                // Convert and download as image
                Canvas2Image.saveAsPNG(canvas);
                $("#img-out").append(canvas);
            }
        });
    });
});

编辑： jsfiddle： https ://jsfiddle.net/0y2zxxL8/3/

我可能会使用其他图书馆。我也可以在后端这样做。 （我在后端使用 PHP + laravel 5）有没有一种方法可以生成带有外部图像的 HTML div 的“屏幕截图”？

更新 当前答案在编辑后有效。然而，对于我的实际使用，将有多个图像，其位置由用户通过拖放设置。我仍然可以得到位置，但如果可以不专门设置位置对我来说会更好。

原文由 cytsunny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的 JSFiddle 给出了 ReferenceError: Canvas2Image is not defined 同时点击“保存 PNG”按钮。所以检查你的代码（不是小提琴）是否有同样的错误。

更新

请参阅此 JSFiddle 示例作为参考。愿这对你有所帮助。

更新 2

我将一些代码放入您的代码中，请检查一下。希望这将是您的解决方案..！

FF v44 的工作结果及其工作。使用 JSFiddle 代码拍摄

 $(function() {
    $("#btnSave").click(function() {
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                var context=canvas.getContext("2d"); // returns the 2d context object
                var img=new Image() //creates a variable for a new image

                img.src= "http://lorempixel.com/400/200/"; // specifies the location of the image
                context.drawImage(img,0,50); // draws the image at the specified x and y location
                // Convert and download as image
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image
                Canvas2Image.saveAsPNG(canvas);
                $("#img-out").append(canvas);
            }
        });
    });
});

更新 3 (12/29/2016) JSFiddle

经过研究，发现问题是因为我们只是分配了图像源，它只是传递消息给浏览器来检索数据。

当单击以从中绘制画布时，浏览器可能无法真正访问其他图像元素。我们只是告诉代码加载它，它就完成了。

更改代码以解决 OP 面临的 chrome 问题，如下所示：

 img.onload = function() {
  context.drawImage(img, 0, 50);// draws the image at the specified x and y location
}

更新 4 JSFiddle

根据 OP 要求使图像位置动态。

原文由 AddWeb Solution Pvt Ltd 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

onrendered 不再工作..

我通过添加“allowTaint”选项解决了这个问题

{ allowTaint: true }

2018解决方案：

 html2canvas(document.getElementById('result'), { allowTaint: true }).then(function (canvas) {
    document.body.appendChild(canvas);
});

原文由 r3mus 发布，翻译遵循 CC BY-SA 4.0 许可协议