image is covered by black shadow #3222

fabpiaf · 2024-12-17T15:15:36Z

I created the jsfiddle but it doesnt work as expected - probably due to the small dimensions in the lower right corner..
But running it locally works.

The proble is that the generated image is covered by black shadow?

mwe again

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
function h2c() {
  r = document.getElementById('box').getBoundingClientRect()
  rid = document.getElementById('imgdiv').getBoundingClientRect()
  y = r.top
  x = r.left
  w = r.width
  h = r.height
  html2canvas(document.getElementById('imgdiv'), {
    allowTaint: true,
    x: x,
    y: y,
    width: w,
    height: h
  }).then(function(canvas) {
    a = document.getElementById('outdiv')
    a.innerHTML = ""
    a.appendChild(canvas)
  });
}
</script>
</head>

<body onload=h2c()>
      <div id=imgdiv style="position:relative;overflow:hidden;display:inline-block;width:300px;height:300x">
        <div id=imgsize>
          <img src="https://picsum.photos/id/1/200/300" id=img style="object-fit:contain;width:100%" />
        </div>
        <div id="box" style="position:absolute;box-shadow:0 0 0 1000px rgba(0,0,0,.8); width:100px;height:100px;top:100;left:100"></div>
      </div>
      <div id=outdiv></div>

      </body>

    </html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

image is covered by black shadow #3222

image is covered by black shadow #3222

fabpiaf commented Dec 17, 2024 •

edited

Loading

image is covered by black shadow #3222

image is covered by black shadow #3222

Comments

fabpiaf commented Dec 17, 2024 • edited Loading

fabpiaf commented Dec 17, 2024 •

edited

Loading