如何生成带有外部图片的html div的“截图”？
我有一个带有外部图像的HTML div。(以下是一个示例，但在实际情况下，我使用的是Amazon，因此不能将图像下载并存储在同一服务器上)目前我正在使用html2canvas将S3转换为图像。但是，外部图像始终由空格替换。
我用来捕获图像的代码如下：
$(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的“屏幕截图”？
更新当前答案在编辑后可用。然而，对于我的实际使用，将有多个图像，它们的位置由用户通过拖放设置。我仍然可以得到这个职位，但如果可以不具体设置职位，对我来说会更好。
回答 3
Stack Overflow用户
发布于 2016-12-21 13:35:18
当点击“保存PNG”按钮时，你的JSFiddle给出了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 (2016年12月29日) JSFiddle
经过研究，发现这个问题是因为我们只分配了图像源，这个图像源只是将消息传递给浏览器来检索数据。
当点击以从其绘制画布时，进一步图像元素可能不是浏览器真正可访问的。我们只是告诉代码加载它，然后它就完成了。
修改代码以解决OP面临的chrome问题，如下所示：
img.onload = function() {
context.drawImage(img, 0, 50);// draws the image at the specified x and y location
}更新4 JSFiddle
根据操作要求动态调整图像的位置。
Stack Overflow用户
发布于 2018-12-26 17:32:57
onrendered不再起作用..
我通过添加"allowTaint“选项解决了这个问题
{ allowTaint: true }2018年解决方案：
html2canvas(document.getElementById('result'), { allowTaint: true }).then(function (canvas) {
document.body.appendChild(canvas);
});Stack Overflow用户
发布于 2017-01-04 18:58:07
您可以尝试扫描外部urls的图像源，并将其更改为您的网站，然后使用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);
}
});
});
}); 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;
}注意: php脚本非常简单，图像检测不是100%工作，这只是给你一个想法。如果你使用一些php图像库来加载和获取图片类型，你只需要几行代码就可以做到这一点。您也可以尝试使用"php readfile“。
https://stackoverflow.com/questions/41254805
复制相似问题