I have this simple code to save html as image:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/canvas2image.js"></script>
<script>
$('#save').click(function () {
var elem = $('#element').get(0);
var leba = "600";
var ting = "400";
var type = "bmp";
var name = "temp"
html2canvas(elem).then(function (canvas) {
var cWidth = canvas.width;
var cHeight = canvas.height;
var img = Canvas2Image.convertToImage(canvas, cWidth, cHeight);
$('#preview').after(img);
Canvas2Image.saveAsImage(canvas, leba, ting, type, name);
})
})
</script>
<div id="element"
style="width: 600px; height: 450px; background-color: aquamarine; margin: 30px auto; text-align: center">
<h1>Screenshot</h1>
<input type="text" style="background-color: aliceblue; border: 1px solid #aaaaaa; color: #333333">
</div>
<div style="text-align: center">
<button id="save">Salva</button>
<p id="preview"></p>
</div>
</body>
</html>
I want to have a preview of screenshot and save it on click, but when I click nothing happens.
The three files containing the three scripts are correctly loaded, I'm using visual studio code and the links are correct, but despite the attempts I can't get the image.
I also tried to put the js links directly, but without success, I moved the scripts directly into the html tag (I know it's useless), but my page doesn't give any results.
Aucun commentaire:
Enregistrer un commentaire