<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();
});