Html2canvas screenshot is incomplete

problem description

recently need to do a sharing function, native app embedded h5 page, intercept the current page as a sharing cover.
uses html2canvas, to capture screenshots in the computer simulator. There is no problem, but only part of the screenshot can be captured on the real machine

related pictures

original page

the environmental background of the problems and what methods you have tried

has been searching the Internet for a long time, which may be the reason why the layout uses positioning, but even if positioning is not needed, it is still incomplete

related codes

const dom = this.$refs.container
html2canvas(dom, {
  useCORS: true,
  foreignObjectRendering: true
}).then(canvas => {
  const base64 = canvas.toDataURL("image/jpeg")
  // upload base64 ... return url
})

Canvas html2canvas

Mar.06,2022

try to intercept and put it into onload, and make sure that the captured image has been loaded

img.onload= function () {

}

I have a similar problem. On some lower-version phones, the image can be converted successfully when the picture exists in the form of a path. However, when the picture exists in the form of base64, the picture is gone after conversion.
if you look at your place, some pictures show up and some don't. It should be that webpack automatically converts the small picture into base64, so it doesn't show up. You can configure it in webpack

Hello, have you solved the problem? I have also encountered a type of problem. There is no problem on pc, but it cannot be completely cut off when it comes to the mobile phone

Previous: Flink standalone cluster registration failed

Next: When passing parameters to Django template HTML, if you pass a string in the form of js code, why does it become &-sharp39;? when the string is enclosed in single quotation marks?