Javascript 如何生成；截图；html div的外部图像？

我有一个带有外部图像的HTML div。（以下是一个示例，但在实际情况中，我使用的是AmazonS3，因此在同一台服务器上下载并存储映像不是一个选项）当前我使用的是将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:

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

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

您给定的

参考错误：点击“保存PNG”按钮时未定义画布2图像。所以，检查您的代码（而不是小提琴）是否存在相同的错误

更新

请参见此示例作为参考。愿这个能帮助你

更新2

我把一些代码放进你的一个，检查一下。希望这将是您的解决方案

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

更新3（2016年12月29日）

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

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

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

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

更新4

根据OP要求使图像位置动态。
您可以尝试扫描图像源以查找外部URL，并将其更改为您的网站，然后使用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);
        }
    });
  });
}); 

$（函数（）{
var imageproxy=”http://example.com/imageproxy.php“；//改变这个
var mydomain=newregexp（location.host）；
$（“#btnSave”）。单击（函数（）{
$（“#小部件”）.find（'img'）.each（函数（）{
var img_src=$（this.attr（'src'）；
if（！mydomain.test（img_src））{
$（this）.attr（'src'，imageproxy+“？url=“+encodeURIComponent（img_src））；
}
});
html2canvas（$（“#小部件”）{
onrendered：函数（画布）{
var link=$（'Download'）；
link.attr（'download'，'test.png'）；
link.attr（'href'，canvas.toDataURL（））；
美元（“#btnSave”）。在（链接）之后；
}
});
});
}); 

imageproxy.php

<?php

if(!empty($_GET['url'])){

    $url = urldecode($_GET['url']);
    $img_type = "image/jpeg";

    $chunks = explode('.', $url);

    if(is_array($chunks) && count($chunks) > 1){
        $ext = end($chunks);

        switch ($ext){

            case 'jpg':
            case 'jpeg':
                $img_type = "image/jpeg";
            break;

            case 'png':
                $img_type = "image/png";
            break;

            case 'gif':
                $img_type = "image/gif";
            break;
        }
    }


    $img = file_get_contents($url);

    header ("Content-Type: $img_type");
    echo $img;
}

onrendered不再工作

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

2018年解决方案：

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

我已尝试删除行Canvas2Image.saveAsPNG（canvas）；。这消除了错误，但问题仍然没有解决。似乎它仍然无法与您提供的新链接一起工作。基本上，您在JSFIDLE上看到的问题就是我在项目中看到的问题。它失败，没有错误消息。输出图像中只有一个空格而不是外部图像。@cytsunny检查我的更新2否，它不工作。这是测试您的解决方案的JSFIDEL。我不是这方面的专家。但是，如果您希望得到尽可能好的结果，并且您可以在服务器端执行此操作，您可以查看和。@devk是的，我知道这一点，这就是为什么我说我不介意在后端执行此操作。只是使用cors：是的，我需要一个div的屏幕截图，而不仅仅是保存div上的图像。您在投票否决之前测试了代码吗？在你的问题中，你会说：“然而，外部图像总是被一个空格所取代。”我建议的解决方案解决了这个问题，html2cavas足够好，可以将div变成屏幕截图
{ allowTaint: true }

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