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图像下载到桌面