下面的代码允许在桌面上单击下载图像,但不适用于移动设备;(
示例可以在下面找到:
var test = $(".test").get(0);
$(document).on('click', '.save_btn', function(e) {
e.preventDefault();
html2canvas(test).then(function(canvas) {
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
var imgURL = canvas.toDataURL("image/png");
// render image
return Canvas2Image.saveAsPNG(canvas);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div style="width: 400px;" class="test"> HTML Container </div>
<a href="javascript:void(0);" class="save_btn"> Save And Download </a>
<!-- Plugins I have used: canvas2image.js, html2canvas.js -->
示例:JSFiddle