Speichern der Leinwand zusammen mit der Div

Question

Ich bin ein Programm erstellen, wo der Benutzer ein Bild hochladen wird und das Programm wird ein Div oberhalb der Leinwand angezeigt und löste dieses Problem bereits. Aber mein Problem ist, wenn ich versuche, das Bild zu speichern/herunterzuladen, wird es nur die Leinwand speichern.

<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> 

Ich habe diesen Code zum Speichern/Herunterladen der Zeichenfläche verwendet.

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

Gibt es eine Methode, um das Bild zusammen mit dem darüber angezeigten div zu speichern?

Answer 1

können Sie erreichen, dass eine JavaScript-Bibliothek html2canvas genannt.

ᴅᴇᴍᴏ

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>

Um mehr über die Bibliothek finden Sie in der offiziellen documentation zu lernen.

Answer 2

Nein, Sie können nicht das div mit dem Canvas-Element speichern,