Images get zoomed on rendering

[navi415]

script- function showImg(){ html2canvas(document.querySelector("#default-card"),{

}).then(canvas => { document.body.appendChild(canvas) }); }

[JEricaM]

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

[Mr-TOA]

add/edit this option: scale html2canvas(document.querySelector("#capture"), {scale: window.devicePixelRatio=1}).then...

[ortonomy]

arrggghh, also seeing this incredibly annoying problem. Any ideas? - it works on first render, but then fails after any subsequent rendering

[morneluckybeard]

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.

[kvabakoma]

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.

[morneluckybeard]

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

[koustav-livly]

same problem. Any solution ?

Actual image

code <div className="relative mx-4 w-1/3 "> <Image className="h-72 rounded-md" src={urlFor(post.mainImage).url()} alt={post.author.name} width={500} height={400} objectFit="cover" ></Image></div>

[hh1412]

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

[hh1412]

我使用了后台URL属性来解决这个问题，但是它不支持后台重复。我需要添加自己的样式以使图形不重复

It seems that using background urls is also incomplete. The previous one was a coincidence

[hasanshafiq29]

Same issue here. But its not related to svg I think.

[PT-3Y]

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)

[funkyvisions]

Having the same issue. None of the above suggestions worked. Only happens on Safari (both desktop and mobile).