How to add a header to a captured image with html2canvas?

Asked

Viewed 55 times

1

I am trying to issue a subscription voucher on a page, and in it you have the option to save the voucher as image, on the voucher page DO NOT have the header with the company logo and the name of the signature, i want to add this to the image but without it appearing to my user,the code below and what I have and generates the image perfectly the way I want, I just need to add a header in the image with the logo and any writing in front.

function gerarImagem() {
  html2canvas(document.getElementById('telaPrint')).then(function(canvas) {
    var name = 'img-print';
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
      let a = document.createElement('a');
      a.href = window.URL.createObjectURL(xhr.response);
      a.download = name + '.png';
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      a.remove()
    };
    xhr.open('GET', canvas.toDataURL("image/png", 1.0));
    xhr.send();
  });

}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>34571073</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>

<body>

  <div id="telaPrint" style="background-color: #fff">
    <pre>
        dsadadadada
        asdadadsada
    
        adadada
    
        adadadasdada
      </pre>
  </div>
  <button onClick="gerarImagem()">img</button>
</body>

in case the above code does not work for Cdn has this codepen.

sorry for the inexperience here at stackoverflow editor

canvas html2canvas html5-canvas

1 answer

1

We can add the header before converting and place the encoded image in Base64.

function gerarImagem() {

    var telaPrint = document.getElementById('telaPrint');
    var header = document.createElement("h1");
    header.textContent = "Título";
    telaPrint.prepend(header);
    var img = new Image();
    img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAADICAYAAADFjnuPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjA2NTY4MzdEMzQxMUU0QUVBMkIwQThFRUM1NzY0RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjA2NTY4NDdEMzQxMUU0QUVBMkIwQThFRUM1NzY0RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCMDY1NjgxN0QzNDExRTRBRUEyQjBBOEVFQzU3NjREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCMDY1NjgyN0QzNDExRTRBRUEyQjBBOEVFQzU3NjREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+nkznnQAABrJJREFUeNrs3Y9t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"
    img.onload = function() {
        telaPrint.prepend(img);
        converter();
        header.remove();
        img.remove();
    }

}

function converter(){

    html2canvas(document.getElementById('telaPrint')).then(function (canvas) {
    var name = 'img-print';
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function () {
        let a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response);
        a.download = name + '.png';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        a.remove()
    };
    xhr.open('GET', canvas.toDataURL("image/png", 1.0));
    xhr.send();
    });

}

Browser other questions tagged canvas html2canvas html5-canvas

You are not signed in. Login or sign up in order to post.