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

  • pc

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
})

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

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bd912f-31140.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bd912f-31140.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?