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

php javascript html html2canvas laravel

2022-08-30 21:16:08

我有一个带有外部图像的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的“屏幕截图”？

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

答案 1

您的JSFiddle在点击“保存PNG”按钮时给出。因此，请检查您的代码（不是小提琴）是否存在相同的错误。ReferenceError: Canvas2Image is not defined

更新
请参阅此 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 要求使图像位置动态化。

答案 2

onrendered 不再起作用。.

我通过添加“允许污点”选项解决了这个问题

{ allowTaint: true }

2018年解决方案：

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