題記????------年輕是我們唯一擁有權利去編織夢想的時光。需求來源項目開發過程中，你可能會遇到用戶需要保存當前頁面的內容，但是用戶又不想自己通過手機系統手動截圖；又或者，你想分享當前頁面的內容，把它當做一個海報分享，那這個時候就需要通過程序員來幫你完成前期操作，這個時候就用到了H5快照功能，具體情況如下。html源碼 <div class="contentBox" id="need"> <img src="images/1.jpg" /> <div class="mainText1"> 菩提本無樹，明鏡亦非臺。<br> 佛性常清凈，何處有塵埃！<br> 身是菩提樹，心如明鏡臺。<br> 明鏡本清凈，何處染塵埃！<br> 菩提本無樹，明鏡亦非臺。<br> 本來無一物，何處惹塵埃！<br> 菩提只向心覓，何勞向外求玄？<br> 聽說依此修行，西方只在目前！ div> <div class="mainText2">Bodhi has no trees, and a mirror is not a platform.There's nothing in the world, where to get dust!div> div> <div class="btn">下載div> <img src="" class="uploadImg" />div>

js源碼

截圖功能需要依賴于canvas2image.js和html2canvas.js首先在頁面中引入這兩個js，當然，如果你需要用到jq，同時還要引入jquery依賴<script type="text/javascript" src="js/jquery-1.7.2.min.js">script><script type="text/javascript" src="js/canvas2image.js">script><script type="text/javascript" src="js/html2canvas.js">script><script type="text/javascript"> $(".btn").click(function(){ var need = $("#need").get(0); html2canvas(need, { useCORS: true, //允許跨域 allowTaint: false, //允許跨域數據污染'被污染'的canvas taintTest: true, scale: 1 //比例，越大分辨率越高，圖片越小 }).then(function(canvas) { // canvas寬度 var canvasWidth = $("#need").width(); // canvas高度 var canvasHeight = $("#need").height(); // 調用Canvas2Image插件 let w = $("#need").width(); //圖片寬度 let h = $("#need").height(); // 將canvas轉為圖片 var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight); // var img = Canvas2Image.convertToJPEG(canvas, canvasWidth, canvasHeight) $(".uploadImg").attr("src",img.src);// 渲染圖片，并且加到頁面中查看效果 // 保存 saveFile(img.src, 'richer.png'); }); })// 保存文件函數 var saveFile = function(data, filename){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); save_link.href = data; save_link.download = filename; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event); };script>

截取圖片不能顯示問題

在項目測試過程中，可能有的同學會遇到截取圖片，截取成功后文字能顯示，但是圖片顯示不出來的問題。這個問題我在上面的js中也有所標注，主要是跨域問題。

在你設置useCORS: true,?為圖，允許跨域的前提下，你的項目還要運行在環境中才能完全顯示圖片。環境中運行很重要，你可以在本地部署服務，或者放到一個線上的服務器中運行，這樣測試，就是ok了，當然，后續你的項目放在正式環境中，那肯定也是ok的。

最后放上效果圖

更多精彩內容，請點擊左下角閱讀原文

總結

以上是生活随笔為你收集整理的html2canvas 截图div_H5快照截图[html2canvas]+图片下载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。