I use the html2canvas tool in a project to print a certain area of my code and save it as an image.

I have tried to save in the following formats, JPEG and PNG , but both are of the same quality, I would like to know, of someone who uses this tool too, way to determine the quality of the image being saved.

[EDIT]

Responding to the questions asked:

This is the code to call html2canvas , pretty simple, practically transforms the image into url saved in an input hidden to save it with PHP (I'm not sure exactly what this send to save with PHP has something to do with this bug >, if any, please let me know):

html2canvas($("#result"), {
    onrendered: function(canvas) {
        img = canvas.toDataURL("image/jpeg");

        $("#screenshot").val(img);

        $("#form").submit();
    }
});

In this system where I work, one of its functions is to create images for posting on Facebook.

The HTML used consists of:

The reason I did not use a background image in <div id="backgroud"> was a decision related to other system features.

CSS consists of:

div#template {
  width: 500px;
  height: 450px;
  position: relative;  
  background: rgba(0, 0, 0, 0.1);
}
div#background {
  width: 500px;
  height: 450px;
  position: absolute;
  z-index: 1;
}
img#bg-image {
  display: none;
}
div#content {
  width: 500px;
  height: 125px;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 25%;
  color: #fff;
  display: table;
  z-index: 2;
}
div#content-bar {
  width: 500px;
  height: 40px;
  position: absolute;
  backgrund:#000;
}
h1.title {
  color: inherit;
  width: 400px;
  margin: 15px auto;
  font-size: 30px;
  font-weight: bold;
}
h2.subtitle {
  color: inherit;
  font-size: 20px;
  margin: 75px auto;
  font-weight: bold;
}

It's pretty basic, because in this case it just absolute positioning of the divs and places them one on top of the other, leaving <div id="background"> behind background function.

A sample image

I do not know if it's going to look great, but I'm sending a print I took of an image posted after it's ready.

If you notice, the image is a bit "blurry", it does not occur during image construction.

I did not post the HTML and CSS related to the image, as I do not have them at my disposal at the moment.