<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a type="button" id="btn"><button id="copy">点击复制图片</button></a>
<div class="myImg" style="position:relative;">
<img src="1.jpg">
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script>
$("#copy").click(function(){
html2canvas($(".myImg"),{ // $("body")截图是全部内容，$(".myImg")是你要复制生成canvas的区域，可以自己选
onrendered:function(canvas){
dataURL =canvas.toDataURL("image/png");
$("body").append(canvas);
//下载图片
$('#btn').attr( 'href' , dataURL ) ;
$('#btn').attr( 'download' , 'download.png' ) ;
},
width:300,
height:300
})
})
</script>
</html>这就是全部代码，要下载html2canvas.js或者引入cdn。
截图看效果：
注意：要放在服务器运行，否则点击之后发现并没有截下图片。