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作为后端）有没有办法生成一个＆＃34;截图＆＃34;带有外部图像的HTML div？

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

Answer 1

点击“保存PNG”按钮时，JSFiddle给出了ReferenceError: Canvas2Image is not defined $(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); } }); }); });因此，检查您的代码（而不是小提琴）是否有同样的错误。

<强>更新
请参阅此JSFiddle示例作为参考。愿这个人能帮到你。

更新2
我将一些代码放入你的代码中，然后查看。希望这将是您的解决方案..！

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

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

更新3 （2016年12月29日）JSFiddle

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

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

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

var newObj = JSON.parse(JSON.stringify(obj))

更新4 JSFiddle
根据OP要求使图像位置动态化。

Answer 2

您可以尝试扫描图像源以获取外部网址并将其更改为您的网站并使用php加载它们。

像

这样的东西

https://api.mailgun.net/v3/{domain}/messages

imageproxy.php

$(function() { 

  var imageproxy = "http://example.com/imageproxy.php"; //Change this
  var mydomain = new RegExp(location.host);

  $("#btnSave").click(function() { 

    $("#widget").find('img').each(function(){

       var img_src = $(this).attr('src');
       if(!mydomain.test(img_src)){
           $(this).attr('src', imageproxy + "?url=" + encodeURIComponent(img_src));
       }
    });

    html2canvas($("#widget"), {
        onrendered: function(canvas) {

            var link = $('<a target="_blank">Download</a>');
            link.attr('download', 'test.png');
            link.attr('href', canvas.toDataURL());

            $("#btnSave").after(link);
        }
    });
  });
});

注意：php脚本非常简单，图像检测不起作用100％，这只是ti给你一个想法。如果你使用一些php图像库来加载和获取图像类型，你只需几行代码即可。你也可以试试“php readfile”。

Answer 3

已渲染已不再起作用。

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

{ allowTaint: true }

2018解决方案：

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

如何生成＆＃34;截图＆＃34;带有外部图像的html div？

3 个答案: