[HTML 2 Image Web] Improvement suggestion - BMP and white space issues
html-2-image-web
Web icon
Forge component by Prasad Rao
Application Type
Traditional Web

Hi, thanks for making available this component.

I've run into some issues that were caused by the limits of html2canvas JS. Will leave the issues here and what I did to solve them in order to suggest some improvements in case you wish to update it.

1) the BMP file type was not working since not all browsers support BMP. After a small search I've found this suggestion canvas unable to generate bmp image dataurl in chrome so I've inserted a new <script> that contained the CanvasToBMP JS given on the answer.

2) when we used a background color we always had a left white space that was pushing and cutting the content. We tried using only CSS styling but it didn't disappear.


Then I've come across with this reported issue https://github.com/niklasvh/html2canvas/issues/1438 and I've used one of the suggested methods:

$("html").addClass("hide-scrollbar"); //hide scrollbar because it is showing left white padding
//html2canvas code here
$("html").removeClass("hide-scrollbar");

3) finally we noticed that there was still a small white bar on the right side meaning that the background-color was not enough. That's when I also decided to introduze the options configuration of the html2canvas so I could tell the JS directly to use the backgroundColor I wanted https://html2canvas.hertzen.com/configuration.

In the end the updated version looked something like this:

"<script>
$('#"+EncodeJavaScript(TriggerId)+"').on( '"+EncodeJavaScript(EventType)+"', function() {
    $('html').addClass('hide-scrollbar'); //hide scrollbar because it is showing left white padding

    var container = '#"+EncodeJavaScript(ContainerId)+"';
    var options =" + Options + ";
    html2canvas(document.querySelector(container), options).then(function(canvas) {
        var Image;
        
        if( (typeof CanvasToBMP !== 'undefined') && "+ ToLower(ImageTypeId = Entities.ImageType.BMP) +") {
            Image = CanvasToBMP.toDataURL(canvas);
        }
        else {
            Image = canvas.toDataURL('"+EncodeJavaScript(ImageTypeId)+"');
        }

        TriggerEvent('" + ImageGenerated.Id + "', Image)
    });

    $('html').removeClass('hide-scrollbar');
}); 
</script>"

It's not perfect but it's working for me so i hope it helps and I've attached my final oml,
David

HTML2ImageWeb.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.