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

正在下载下面的图片

请参阅下面link了解不同的保存选项

html2canvas 图像不保存

html2canvas image not saving

html

javascript

html5-canvas

html2canvas