Open navi415 opened 2 years ago
I have the same problem with svg elements. I tryied to add width and height of each svg as an attribute and not with css as someone else suggested but not worked for me :S
add/edit this option: scale
html2canvas(document.querySelector("#capture"), {scale: window.devicePixelRatio=1}).then...
arrggghh, also seeing this incredibly annoying problem. Any ideas? - it works on first render, but then fails after any subsequent rendering
The same happened to me when I specified an existing canvas My solution was to not specify a canvas in the config, this resulted in always generating the same size.
Having the same problem. None of the mentioned solutions works for me. I'm not specifying a canvas. Tried with different scale values. Nothing works.
The interesting part is that Chrome renders it properly, while OSX Safari or Win Firefox returns it zoomed.
Having the same problem. None of the mentioned solutions works for me. I'm not specifying a canvas. Tried with different scale values. Nothing works.
The interesting part is that Chrome renders it properly, while OSX Safari or Win Firefox returns it zoomed.
I had to divide my height and width by the scale to get an accurate size, maybe this helps?
let scale = 3.4;
if (typeof window !== 'undefined') {
setLoading(true);
var previewImageContainer = document.querySelector('#imageCaptureContainer') as HTMLElement;
html2Canvas(previewImageContainer, {
width: 1080 / scale,
height: 1080 / scale,
useCORS: true,
scale: scale,
logging: false
}).then((canvas) => {
var image = new window.Image();
image.id = 'a';
image.src = canvas.toDataURL();
});
}
same problem. Any solution ?
Actual image
code `
I used the background URL attribute to solve the problem, but it does not support background repeat. I need to add my own style to make the graphics not duplicate
我使用了后台URL属性来解决这个问题,但是它不支持后台重复。我需要添加自己的样式以使图形不重复
It seems that using background urls is also incomplete. The previous one was a coincidence
Same issue here. But its not related to svg I think.
I encountered the same issue on my mobile device, even though it works well on a PC browser.. I converted the CSS property of image from pixels to percent. Then It work well var parentWidth = parseInt(parent.offsetWidth); var parentHeight = parseInt(parent.offsetHeight);
// Get the element's width, height, top, and left position
var elementWidth = parseInt(imgElement.style.width.replace('px', ''));
var elementHeight = parseInt(imgElement.style.height.replace('px', ''));
var elementTop = parseInt(imgElement.style.top.replace('px', ''));
var elementLeft = parseInt(imgElement.style.left.replace('px', ''));
// Convert pixel values to percentages
var widthPercentage = (elementWidth / parentWidth) * 100;
var heightPercentage = (elementHeight / parentHeight) * 100;
var topPercentage = (elementTop / parentHeight) * 100;
var leftPercentage = (elementLeft / parentWidth) * 100;
imgElement.style.width = widthPercentage + '%';
imgElement.style.height = heightPercentage + '%';
imgElement.style.maxWidth = widthPercentage + '%';
imgElement.style.maxHeight = heightPercentage + '%';
imgElement.style.top = topPercentage + '%';
imgElement.style.left = leftPercentage + '%';
parent.appendChild(imgElement)
Having the same issue. None of the above suggestions worked. Only happens on Safari (both desktop and mobile).
script- function showImg(){ html2canvas(document.querySelector("#default-card"),{
}).then(canvas => { document.body.appendChild(canvas) }); }