保存畫布和Div

我正在創建一個程序，用戶將上傳圖像，程序將在畫布上方顯示div，並已解決此問題。但我的問題是，當我試圖保存/下載圖像時，它只會保存畫布。保存畫布和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一起保存？

來源

2017-05-17 DreiDreiDrei

你可以做到這一點使用JavaScript庫調用html2canvas。

ᴅᴇᴍᴏ

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>

要了解更多關於該庫，請參閱官方documentation。

來源

2017-05-17 09:40:46

謝謝，我會試試這個。順便說一句，這會影響圖像的質量？ – DreiDreiDrei

恩..我猜不。它通常會保存最高質量的圖像 –

我有一個問題，您是否有任何想法如何解決圖像上的字體在嘗試下載生成的圖像時發生變化的問題？ – DreiDreiDrei

不，你不能保存與canvas元素的股利，

來源

2017-05-17 09:35:42

保存畫布和Div

回答

相關問題