0

I'm using tsayen's dom-to-image library to snapshot an image element. The intrinsic size of my image is close to 1000x1000px, but on my website I have it scaled down to about 500x500px. I'm wanting to scale the image back to its intrinsic size before the dom-to-image renders it. This is what I've tried to use:

HTML:

<div class="container" id="node">
   <img class="mz_img" src="/MZ.jpg" />

</div>

JS:

domtoimage
 .toPng(node, {
   style: {
    width: "1100px",
    height: "1256px",
   },
 })

This outputs an almost entirely back 1100x1256 image, with my "mz_img" image displaced almost completely out of frame. I've tried about five different ways for scaling up the image before render, and they all produce completely unpredictable (and unusable) results. What's the best method for scaling up an image before render?

1 Answers1

0

It seems that the width and height options are not working as intended.
As a work-around I created a hidden div that is the parent of another div that has the ref (otherwise the image will be black) and my content at the target resolution next to my responsive content that is displayed.

<div style={{position: 'absolute', top: '1000000px'}} >
  <div ref={ref} >
    <Content hiRes />
  </div>
</div>
<Content />
Guilherme Toledo
  • 11
  • 2