html2canvas圖片未保存

Question

單擊該按鈕后，圖像已正確加載，但無法下載。 它只是顯示在div上。 一切工作正常，只是圖像無法保存。

我的HTML和JS：

 <script> document.getElementById("download").addEventListener("click", function() { html2canvas(document.getElementById("output"), {allowTaint: true}).then(function(canvas) { document.getElementById("output2").appendChild(canvas); }); }); </script> 

 <button type="button" id="download" class="btn btn-success">Preview Image</button> <div id="output2"></div> <div id="output" class="dark-mode"> <h1><b>{{heading}}</b></h1> <i class="fa fa-twitter" id="author"></i> <a id="authorname">{{author}}</a> <span id="time" class="date">{{date}}</span> <p>{{news}}</p> <img :src="image" width="100%"/> <p id="img_text">{{caption}}</p> </div> 

Answer 1

為了達到預期的效果，請創建保存方法

 document.getElementById("download").addEventListener("click", function() { html2canvas(document.getElementById("output"), {allowTaint: true}).then(function(canvas) { document.getElementById("output2").appendChild(canvas); saveAs(canvas.toDataURL(), 'file-name.png'); }); }); function saveAs(uri, filename) { var link = document.createElement('a'); if (typeof link.download === 'string') { link.href = uri; link.download = filename; //Firefox requires the link to be in the body document.body.appendChild(link); //simulate click link.click(); //remove the link when done document.body.removeChild(link); } else { window.open(uri); } } 

 #output2 { border: 1px solid black; } 

 <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <button type="button" id="download" class="btn btn-success">Preview Image</button> Output 2 - <div id="output2"></div> <div id="output" class="dark-mode"> <h1><b>{{heading}}</b></h1> <i class="fa fa-twitter" id="author"></i> <a id="authorname">{{author}}</a> <span id="time" class="date">{{date}}</span> <p>{{news}}</p> <img :src="image" width="100%"/> <p id="img_text">{{caption}}</p> </div> 

codepen- https: //codepen.io/nagasai/pen/jXavqm

下圖下載

請參考下面的鏈接獲取不同的保存選項將html2canvas圖像下載到桌面