How to make an html div with text on top of an image downloadable / user friendly?

Question

I have a div that takes a user image and places user text above it. My goal is for users to see the preview and adjust the image / text to their liking, to be able to download or save the image with the click of a button. Is it possible? Here is my code: (I'm new to html / css, so please forgive the ugly formatting / methods)

HTML:

<script `src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>`

<p>DOM-rendered</p>
<p>&nbsp;</p>

<div id="imagewrap" class="wrap" style="border-style: solid;">
  <img src="../images/environment.gif" id="img_prev" width="640" height="640" />
  <h3 class="desc">Something Inspirational</h3>
</div>

<div id="canvasWrapper" class="outer">
  <p>Canvas-rendered (try right-click, save image as!)</p>
  <p>Or, <a id="downloadLink" download="cat.png">Click Here to Download!</a>
</div>

CSS

.desc {
text-align: center;
}

.outer, .wrap, .html2canvas, .image_text {
  display: inline-block;
  vertical-align: top;
}
.wrap {
  text-align: center;
}
#imagewrap {
  background-color: white;
}

JavaScript:

window.onload = function() {
html2canvas(document.getElementById("imagewrap"), {
onrendered: function(canvas) {
  canvas.className = "html2canvas";
  document.getElementById("canvasWrapper").appendChild(canvas);
  var image = canvas.toDataURL("image/png");
  document.getElementById("downloadLink").href = image;
},
useCORS: true
});
}

function changePicture(image) {
    var at = $(image).attr('at');
    var newpath = '../images/' + at;
    $("#img_prev").attr('src', newpath);
}


function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $('#img_prev')
          .attr('src', e.target.result)
          .width(640)
          .height(640);
      };
      reader.readAsDataURL(input.files[0]);
    }
  };


  $(document).on("click", '.font-names li a',  function() {    
      $("#imagewrap h3").css("font-family", $(this).parent().css("font-family"));
      $("#new_tile_font_style").val($(this).parent().css("font-family"));
   });


  $(document).on("click", '.font-sizes li a',  function() {    
      $("#imagewrap h3").css("font-size", $(this).parent().css("font-size"));
      $("#new_tile_font_size").val($(this).parent().css("font-size") + "px");
    });


  $(document).on("click", '.font-colors li a',  function() {    
      $("#imagewrap h3").css("color", $(this).parent().css("color"));
      $("#new_tile_font_color").val($(this).parent().css("color"));
    });


  $("#new_tile_quote").on('keyup', function() {
   var enteredText = $("#new_tile_quote").val().replace(/\n/g, "<br>");
    $("#imagewrap h3").html(enteredText);
    });

Answer 1

, , , HTML, JS CSS . , html2canvas library, DOM , .

" " , !

window.onload = function() {
  html2canvas(document.getElementById("imagewrap"), {
    onrendered: function(canvas) {
      canvas.className = "html2canvas";
      document.getElementById("canvasWrapper").appendChild(canvas);
      var image = canvas.toDataURL("image/png");
      document.getElementById("downloadLink").href = image;
    },
    useCORS: true
  });
}

.desc {
  text-align: center;
}
.outer, .wrap, .html2canvas, .image_text {
  display: inline-block;
  vertical-align: top;
}
.wrap {
  text-align: center;
}
#imagewrap {
  background-color: white;
}
#wow {
  color: red;
  display: block;
  transform: translate(0px, -12px) rotate(-10deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="outer">
  <p>DOM-rendered</p>
  <p>&nbsp;</p>
  <div id="imagewrap" class="wrap" style="border-style: solid;">
    <img src="https://i.imgur.com/EFM76Qe.jpg?1" id="img_prev" width="170" />
    <h3 class="desc">Something <br /><span style="color: blue;">Inspirational</span></h3>
    <span id="wow">WOW!</span>
  </div>
</div>
<div id="canvasWrapper" class="outer">
  <p>Canvas-rendered (try right-click, save image as!)</p>
  <p>Or, <a id="downloadLink" download="cat.png">Click Here to Download!</a>
</div>

Hide result

Answer 2

HTML5. . .

Answer 3

, , JavaScript , .

document.getElementById('generate').onclick = generateImage;

function generateImage() {
    var container = document.getElementById('image_text');
    var imgPrev = document.getElementById('img_prev');
    var desc = document.getElementById('desc');
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.setAttribute('width', container.clientWidth);
    canvas.setAttribute('height', container.clientHeight);
    context.drawImage(imgPrev, 0, 0);
    context.font = "bold 20px serif";
    context.fillText(desc.innerHTML, 0, container.clientHeight-20);
    context.strokeRect(0, 0, canvas.width, canvas.height);
    var dataURL = canvas.toDataURL();
    var imgFinal = new Image();
    imgFinal.src = dataURL;
    container.parentNode.insertBefore(imgFinal, container.nextSibling);
    container.remove();
    document.getElementById('generate').remove();
}

#image_text {
    display: inline-block;
    border: 1px solid #000;
}

<div id="image_text">
  <div class="wrap">
    <img src= "https://placekitten.com/g/200/300" id="img_prev" crossorigin="anonymous" />
    <h3 id="desc" contenteditable>Something Inspirational</h3>
  </div>
</div>

<button id="generate">Generate Image</button>

Hide result

. crossorigin img, , , , , crossorigin ( , ).

h3 . , , , " " .

script . , , .

javascript creates an element canvas(separated from the DOM) and defines it according to the div container in your markup. Then it inserts the image into the canvas (it inserts it in the upper left corner), loads the text from the tag h3and places it in the lower left corner of the canvas and converts this canvas to data-uri.Then it creates a new element imgafter the container and removes the container and button.