следующий код можно использовать в 2 режимах, в режиме 1 сохранить HTML-код в изображение, в режиме 2 сохранить HTML-код на холсте.
этот код работает с библиотекой: https://github.com/tsayen/dom-to-image
* "id_div" - это идентификатор элемента HTML, который вы хотите преобразовать.
** "canvas_out" - это идентификатор div, который будет содержать холст
так что попробуйте этот код.
:
function Guardardiv(id_div){
var mode = 2 // default 1 (save to image), mode 2 = save to canvas
console.log("Process start");
var node = document.getElementById(id_div);
// get the div that will contain the canvas
var canvas_out = document.getElementById('canvas_out');
var canvas = document.createElement('canvas');
canvas.width = node.scrollWidth;
canvas.height = node.scrollHeight;
domtoimage.toPng(node).then(function (pngDataUrl) {
var img = new Image();
img.onload = function () {
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
};
if (mode == 1){ // save to image
downloadURI(pngDataUrl, "salida.png");
}else if (mode == 2){ // save to canvas
img.src = pngDataUrl;
canvas_out.appendChild(img);
}
console.log("Process finish");
});
}
Итак, если вы хотите сохранить изображение, просто добавьте эту функцию:
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
}
Пример использования:
<html>
<head>
</script src="/dom-to-image.js"></script>
</head>
<body>
<div id="container">
All content that want to transform
</div>
<button onclick="Guardardiv('container');">Convert<button>
<!-- if use mode 2 -->
<div id="canvas_out"></div>
</html>
Прокомментируйте, если это работает.
Comenten si les sirvio:)