我可以下载 HTML 页面的内容，但页面包含 QR 代码图像，该图像在我下载的图像中不可见，而不是出现空白
我的 HTML 和 jQuery 代码位于以下 fiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="html-content-holder" align="center" style="background-color:lightcyan; color:black; width: 500px;
padding-left: 25px; padding-top: 10px;">
<div id="content">
<form method="post" id="qrForm">
<center>
<h4 style="color:red">Generate QR Code using Google Chart API</h4>
<br>
<b>Type Website URL:</b>
<!--Create TextBox Code-->
<input type="text" id="QRCode" value="https://www.google.com" size="25">
<br><br>
<h3>Output QR Image:</h3> <img id='qrImage' style='display:inline;' src="Images/chart.png" />
<img id="embedImage" />
<img id="embedImage" />
<!--<!--<!-- Create Button Code-->
<center>
<input type="button" value="Make QR Code" onclick="javascript: generateQRCode();">
</center>
</center>
<center>
<a id="btn-Convert-Html2Image" href="#">Download QR Png</a>
<br />
<!--Print Preview Img In this Div-->
<h3>Preview :</h3>
<div id="previewImage">
</div>
</center>
</form>
</div>
</div>
<script>
//Generate QR Code Function
function generateQRCode() {
this.qrImage.style.display = 'none';
//GoogleAPI + TextBox Value= Create QR Image.
this.qrImage.src = "https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl=" +
encodeURIComponent(QRCode.value.trim());
this.qrImage.style.display = 'inline';
//Convert Html To Png
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function(canvas) {
$("#QRCanvas").append(canvas);
getCanvas = canvas;
}
});
//jQuery: Download HTML to IMAGE
$("#btn-Convert-Html2Image").on('click', function() {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream" + "Image/chart.png");
$("#btn-Convert-Html2Image").attr("download", "QRCodeImage.png").attr("href", newData);
//<img class="preload_img" src="../../dbfhrael6egb5.cloudfront.net/wp-content/themes/qr/img-V2/modal/download_preloader.gif"/>
});
}
</script>最佳答案
我发现你的 html 有点复杂，所以我改变了它以适应我的风格。我没有使用 html2canvas，由于某种原因我做了一些烦人的事情，所以我使用了另一个做同样事情的库。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Download QR</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.5.2/dom-to-image.min.js"></script>
</head>
<body>
<div style="background-color:lightgrey; padding: 25px;">
<h3>Generate QR Code using Google Chart API</h3>
<form>
<label for="QRCode">Type url:</label>
<input type="text" id="QRCode" value="https://www.google.com">
<button type="button" id="btn-generateQR">Generate QR</button>
</form>
<div id="displayImg"> </div>
<button id="btn-downloadQR" style="display:none;">Download QR</button>
</div>
<script>
$(document).ready(function () {
$('#btn-generateQR').click(function () {
let inputValue = $('#QRCode').val().trim()
$('#displayImg').html(
`
<h4>Output QR Image:</h4>
<img id="linkQR" src="https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl=${inputValue}"/>
`
)
$('#btn-downloadQR').show()
})
$('#btn-downloadQR').click(function () {
domtoimage
.toJpeg(document.getElementById('linkQR'), {
quality: 0.95
})
.then(function (dataUrl) {
let link = document.createElement('a')
link.download = 'imageQR.jpeg'
link.href = dataUrl
link.click()
})
})
})
</script>
</body>
</html>关于javascript - 如何将 HTML 页面下载为图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42578116/