Solution to incomplete image offset generated by html2canvas

Time:2020-8-6

Scenario 1:

Background: if the generated image is in a pop-up window, it is normal if there is no scroll bar on the page. However, once the scroll bar appears and the page scrolls, the image drawn by html2canvas will shift out of the white edge corresponding to the scrolling height, as follows:


 

terms of settlement
 

After checking a lot of materials and using many methods, the landlord failed to solve this problem. In a fit of anger, he planned to study the configuration parameters of html2canvas. As expected, the following configuration was found under the configuration parameter rendereoptions


 

The sharp eyed building owner immediately found the thing scroll y. That’s right. This must be used to configure the offset, right? Since you are moving downward to the height of my page scrolling, I’ll set scrolly to negative. That’s OK. Just do it. So the landlord set it up{scrollY: -window.pageYOffset}As a result, something strange happened. Instead of moving down, it began to move upward, as follows


 

What’s wrong with the world, so the landlord set it up again{scrollY: 0}, check it again, it’s solved.
 


 

The original reason is that if scroll is not set, canvas will automatically move downward according to the global page scrolling. Of course, the same is true of scrollx.

Code:
 

Scroll: 0. Other parameters are configured according to your own situation. This parameter must not be less

var htmlDom = document.getElementsByClassName('dialog_content')[0];

html2canvas(htmlDom, {
    Logging: false, // log switch to view the internal execution process of html2canvas
    width:  htmlDom.clientWidth , // DOM original width
    height: htmlDom.clientHeight,
    scrollY: 0, 
    scrollX: 0,
    Usecors: true // [important] enable cross domain configuration
}).then(canvas => {
    var url =  canvas.toDataURL (); // picture address
    htmlDom.appendChild(canvas);
});

Scenario 2:
 

After drawing an image with html2canvas, there will always be an offset distancescrollY: 0,scrollX: 0These two parameters are 0, but we can’t do it this time. Finally, we find out that the reason is that the box is added transform:translateX (- 50%) this style.

terms of settlement:

The user does not need to transform to locate the area. Instead, it can be done in a way that has no offset, such as setting the percentage or fixing the width and height.

This article on the HTML 2canvas generated image offset incomplete solution to this, more related to html2canvas generated image offset content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!

Recommended Today

Redis design and implementation 4: Dictionary Dict

In redis, the dictionary is the infrastructure. Redis database data, expiration time and hash type all take the dictionary as the underlying structure. Structure of dictionary Hashtable The implementation code of hash table is as follows:dict.h/dictht The dictionary of redis is implemented in the form of hash table. typedef struct dictht { //Hash table array, […]