<body>
<a class="save_img" href="javascript:;">长按下方图片保存到手机</a>
<div class="hid_div" > <!--hid_div是展示数据的 -->
</div>
<div class="img_div"> <!-- img_div是放截图的地方 -->
<img id="imgSC"/>
</div>
</body>
首先需要引入html2canva的js 下载地址 https://github.com/niklasvh/html2canvas/releases
//解决图片模糊问题，将图片放大
var canvas2 = document.querySelector('.hid_div');
var width = canvas2.offsetWidth;//dom宽
var height = canvas2.offsetHeight;//dom高
html2canvas($(".hid_div"),{
//dpi: window.devicePixelRatio * 2,
scale: 2,
width: width,
heigth: height,
}).then(function (canvas) {
//因为是手机端展示，所以图片高度使用原始高宽展示
//保存到手机上的是放大之后的图片
$('#imgSC').css("width",width);
$('#imgSC').css("height",height);
var url = canvas.toDataURL("image/png"); // 获取生成的图片的url
//手机端绑定到img标签。pc端绑定到a标签下进行下载
$("#imgSC").attr("src",url);
//隐藏显示的内容
$('.hid_div').hide();
});