Вы можете использовать html2canvas , чтобы получить содержимое div в качестве изображения.Чтобы быть немного более точным, он принимает div и возвращает его содержимое как canvas.
Вот полный пример.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="index.js"></script>
</head>
<body>
<button class="btn btn-default" type="button" onclick="screenshot()">
Download
</button>
<div id="capture">
<img src="https://i.imgur.com/zC8sER6.jpg" alt="Smiley face" />
<img src="https://i.imgur.com/vt1Bu3m.jpg" alt="Smiley face" />
</div>
</body>
</html>
// index.js
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}
function screenshot() {
html2canvas(document.querySelector("#capture"), {
useCORS: true
}).then(canvas => {
document.body.appendChild(canvas);
downloadURI(
canvas
.toDataURL("image/jpeg")
.replace("image/jpeg", "image/octet-stream"),
"yourImage.jpg"
);
});
}
Я не сделалиспользование изображений в коде, который вы разместили, так как они имеют проблемы CORS .Вам не придется беспокоиться об этом, если у вас есть сервер (или вы используете другой источник изображений), так как вы можете добавить поддержку Cors, когда это необходимо.
Если вы можете обойти проблемы cors, вы можете использовать тот же код, который вы опубликовали с добавлением html2canvas, чтобы удовлетворить ваши требования.