Suggesion: Specify the size of the image

[scottcantwell]

Give options to specify the size of the image to create or make them resizable.

[monsterbrain]

Like, Is the generated image too small or too large?

[scottcantwell]

For the purpose that I needed the image, it was too large.

[gustavo-alberto]

Make the image resizable could be done with some button to control the value of scale variable in generate-img-btn function

    $('#generate-img-btn').click(function () {
      var e = document.getElementById("output-location");
      var e_width = e.offsetWidth;
      var e_height = e.offsetHeight;
      var e_x_offset = window.scrollX + e.getBoundingClientRect().left;
      var e_y_offset = window.scrollY + e.getBoundingClientRect().top;

      html2canvas(e, {
        scale: 1,
        backgroundColor: null,
        width: e_width,
        height: e_height,
        x: e_x_offset,
        y: e_y_offset }).then(canvas => {
            //document.body.appendChild(canvas)
            $('#img-preview-div').show();
            var base64image = canvas.toDataURL("image/png");
            let $imgDiv = $('<img src="' + base64image + '"/>');
            $('#img-out-preview').empty();
            $('#img-out-preview').append($imgDiv);
            // var win = window.open('', "_blank");
            // win.document.write('<img src="' + base64image + '"/>');
            // win.document.close();
        });
    });

I have made some test changing the scale value manually and worked. To specify the size of the image, I think that would be necessary other logic and different code.

[monsterbrain]

Oh.. there was a scale parameter ... indeed I could maybe add a slider for that I guess...

Thanks for the tip. Let me check.

[monsterbrain]

Thanks for the tip @gustavo-alberto - Scale was used for canvas mapping. So I have generated bigger image and rescaled it to lower size, so that text are now sharper.

@scottcantwell - I have added option to change size (to multiples of generated output) Hope you find it useful.