與Div一起保存畫布

Question

我正在創建一個程序，用戶將在該程序中上載圖像，並且該程序將在畫布上方顯示一個div，並且已經解決了此問題。 但是我的問題是，當我嘗試保存/下載圖像時，它只會保存畫布。

<div id="memePlaceHolder" style="height: 700px; width:700px;background:#BBB;">
    <canvas id="c" width="0" height="0">
    </canvas>        
    <div id="myTestDiv" name="myTestDiv">
       <h1>#Test Hashtag</h1>
       <br/>
       <h2>My Test Display</h2>
    </div>
</div>

我使用此代碼保存/下載畫布。

e.downloadLink.href = e.c.toDataURL();

有沒有一種方法可以將圖像及其上方顯示的div保存在一起？

Answer 1

您可以使用一個名為html2canvas的JavaScript庫來實現這一目標 。

ᴅᴇᴍᴏ

 let wrapper = document.querySelector('#wrapper'); let title = document.querySelector('#title'); let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); let img = new Image(); img.onload = function () { ctx.drawImage(this, 0, 0, 150, 150); } img.crossOrigin = 'anonymous'; img.src = 'https://i.imgur.com/Q6aZlme.jpg'; function save() { html2canvas(wrapper, { onrendered: function (canvas) { let a = document.createElement('a'); a.href = canvas.toDataURL(); a.download = 'myImage.png'; document.body.appendChild(a); a.click(); document.body.removeChild(a); } }); } 

 #title {font: 16px Verdana;color: #07C}#canvas {border: 1px solid #ccc} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <div id="wrapper"> <div id="title">DreiDreiDrei</div> <canvas id="canvas" width="150" height="150"></canvas> </div> <button onclick="save()">Save as Image</button> 

要了解有關該庫的更多信息，請參閱官方文檔 。

Answer 2

不，您不能使用canvas元素保存div，