search

niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.11k stars 4.75k forks source link

html2canvas rendering blank on Shopify Dawn theme when trying to capture main product image #3120

Open TrishaJohnson opened 9 months ago

TrishaJohnson commented 9 months ago

Please make sure you are testing with the latest release of html2canvas. Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

Bug reports:

When using html2canvas on Shopify with a customized version of the Dawn theme, the rendered canvas is showing up blank. When copy/pasting the enter page's source code into jsfiddle the canvas shows the correct screenshot.

I've tried to capture other elements of the page, and even the entire page, and no matter what I capture it turns up blank.

Please see jsfiddle here: https://jsfiddle.net/pthornt1/v2wzaxhp/1/ and live site is here (password: bbl2023): https://byebluelight-com.myshopify.com/products/team-customizations

The rendered canvas is located at the very bottom of the page/jsfiddle below the site footer.

JS code used:

let div = document.querySelector('#screenshot');
let width = document.querySelector('#screenshot').width;
let height = document.querySelector('#screenshot').height;
html2canvas(div, {
allowTaint: true,
scrollX: 0,
    scrollY: 0,
  width: width,
  height: height
}).then(function(canvas) {
    document.getElementById('output').appendChild(canvas);
});

Element(s) I'm trying to capture specifically:

<div id="screenshot">

<div class="product-media-container media-type-image media-fit-contain global-media-settings gradient" style="--ratio: 1.3333333333333333; --preview-ratio: 1.3333333333333333;">
  <noscript><div class="product__media media">
        <img src="//byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1946" alt="Newport Side" srcset="//byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=246 246w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=493 493w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=600 600w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=713 713w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=823 823w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=990 990w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1100 1100w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1206 1206w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1346 1346w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1426 1426w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1646 1646w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1946 1946w" width="1946" height="1460" sizes="(min-width: 1600px) 825px, (min-width: 990px) calc(55.0vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / 1 - 4rem)">
      </div></noscript>

  <modal-opener class="product__modal-opener product__modal-opener--image no-js-hidden" data-modal="#ProductModal-template--21061782307120__main">
    <span class="product__media-icon motion-reduce quick-add-hidden product__media-icon--hover" aria-hidden="true"><svg aria-hidden="true" focusable="false" class="icon icon-plus" width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.66724 7.93978C4.66655 7.66364 4.88984 7.43922 5.16598 7.43853L10.6996 7.42464C10.9758 7.42395 11.2002 7.64724 11.2009 7.92339C11.2016 8.19953 10.9783 8.42395 10.7021 8.42464L5.16849 8.43852C4.89235 8.43922 4.66793 8.21592 4.66724 7.93978Z" fill="currentColor"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.92576 4.66463C8.2019 4.66394 8.42632 4.88723 8.42702 5.16337L8.4409 10.697C8.44159 10.9732 8.2183 11.1976 7.94215 11.1983C7.66601 11.199 7.44159 10.9757 7.4409 10.6995L7.42702 5.16588C7.42633 4.88974 7.64962 4.66532 7.92576 4.66463Z" fill="currentColor"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8324 3.03011C10.1255 0.323296 5.73693 0.323296 3.03011 3.03011C0.323296 5.73693 0.323296 10.1256 3.03011 12.8324C5.73693 15.5392 10.1255 15.5392 12.8324 12.8324C15.5392 10.1256 15.5392 5.73693 12.8324 3.03011ZM2.32301 2.32301C5.42035 -0.774336 10.4421 -0.774336 13.5395 2.32301C16.6101 5.39361 16.6366 10.3556 13.619 13.4588L18.2473 18.0871C18.4426 18.2824 18.4426 18.599 18.2473 18.7943C18.0521 18.9895 17.7355 18.9895 17.5402 18.7943L12.8778 14.1318C9.76383 16.6223 5.20839 16.4249 2.32301 13.5395C-0.774335 10.4421 -0.774335 5.42035 2.32301 2.32301Z" fill="currentColor"></path>
</svg>
</span>
    <div class="loading-overlay__spinner hidden">
      <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <circle class="path" fill="none" stroke-width="4" cx="33" cy="33" r="30"></circle>
      </svg>
    </div>
    <div class="product__media media media--transparent">
      <img src="//byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1946" alt="Newport Side" srcset="//byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=246 246w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=493 493w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=600 600w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=713 713w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=823 823w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=990 990w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1100 1100w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1206 1206w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1346 1346w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1426 1426w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1646 1646w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1946 1946w" width="1946" height="1460" class="image-magnify-hover" sizes="(min-width: 1600px) 825px, (min-width: 990px) calc(55.0vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / 1 - 4rem)">
<svg class="customizable-svg--frames" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 480 360" style="enable-background:new 0 0 480 360;" xml:space="preserve">
<g>
    <path d="M420.8,179.5C420.8,179.5,420.7,179.6,420.8,179.5c-0.2,2.9-2,3.4-4.4,3.8c-10.1,1.5-20.1,3-30.2,4.6
        c-4.8,0.8-9.5,2-14.3,3c-5.2,1.1-10.4,1.9-15.6,3.1c-5.2,1.2-10.1,3.2-15.2,4.7c-5.5,1.7-11,3.1-16.7,3.4c-5.7,0.3-11.3,0.5-17,0.8
        c-8.4,0.4-16.8,0.9-25.2,1.6c-8.4,0.7-16.8,1.6-25.1,2.6c-12.6,1.6-25,3.7-37.2,7.1c-12.3,3.4-23.9,8.3-34.2,16
        c-7.3,5.5-14.1,11.5-20.8,17.7c-8,7.4-15.5,15.4-22.9,23.4c-1.3,1.4-2.6,2.8-3.9,4.2c-0.4,0.4-0.8,0.8-1.1,1.3
        c-0.8,1.6-1.9,2.8-3.6,3.4c-2.6,0-5.1,0-7.7,0c-2.3-0.3-4.6-0.7-6.9-1c-0.6-0.1-1.3-0.2-1.8-0.6c-1.6-1.4-3.5-2.1-5.5-2.8
        c-2.1-0.8-2.4-2.5-0.7-4.1c0.3-0.3,0.7-0.6,1-0.8c15.2-10.5,30.4-21,45.6-31.4c8.7-5.9,17.1-12.1,26-17.6
        c13.9-8.5,28.9-14.1,44.9-17.5c13.6-2.9,27.3-4.9,40.9-7.2c8.7-1.4,17.3-3.2,25.9-4.6c7.9-1.4,15.8-2.6,23.8-4
        c10-1.7,20-3.6,30-5.4c3.1-0.5,6.1-1.3,9.3-1.1c0.6,0,1.3-0.1,1.9-0.3c7.6-2.1,15.4-2.9,23.2-4.1c6-0.9,12.1-2,18.1-3
        c5.5-0.9,11-1.7,16.5-2.5c1.5-0.2,2.4,0.6,3,2.6C420.8,176.5,420.8,178,420.8,179.5z"></path>
    <path d="M22.9,224.9c1.8-3.1,4-5.9,6-8.8c10.9-16,21.8-32,32.5-48.1c5-7.5,10.9-14.1,18.5-19c6.3-4.1,13.3-6.7,20.5-8.5
        c13.8-3.4,27.8-6.5,41.8-9c9.1-1.6,18.2-3.4,27.4-4.9c8.7-1.4,17.4-2.7,26.1-4c8.7-1.3,17.4-2.5,26.1-3.8c11-1.6,22-3.4,33-4.7
        c0.7-0.1,1.5-0.1,2.2-0.5c0.9,0,1.8,0,2.6,0c0.3,0.2,0.6,0.4,0.9,0.6c0.4,0.3,0.6,0.7,0.5,1.3c-0.1,0.5-0.5,0.5-0.9,0.6
        c-5.2,1.5-10.6,2.1-15.9,2.8c-2,0.3-4,0.7-6,0.9c-1.4,0.1-2,0.9-2.3,2.2c-0.1,0.5-0.2,1-0.2,1.5c0,1.9,0.6,2.4,2.5,2.2
        c5.4-0.4,10.8-0.8,16.2-0.9c-1.8,0.3-3.7,0.6-5.5,0.8c-14.1,1.7-28.1,4.1-42.1,7.1c-8.7,1.9-17.4,4-26.1,5.9c-4.4,1-9,1-13.5,1.1
        c-10.4,0.2-20.8,0.9-31.2,2.1c-10.5,1.2-21,3-31.3,5.4c-8.7,2-16.9,5.1-23.9,10.9c-5.5,4.5-9.6,10.1-13,16.2
        c-3.4,6-6.6,12.2-9.6,18.3c-4.1,8.2-7.9,16.5-11.1,25c-0.6,1.6-1.4,3.1-1.9,4.6c-1.9,5.2-5.8,7.4-11.1,7.4c-3.5,0-6.8-0.6-9.9-2.4
        c-0.5-0.3-0.8-0.7-1.2-1.1C22.9,225.8,22.9,225.3,22.9,224.9z"></path>
</g>
</svg>

<svg class="customizable-svg--text" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 480 360" style="enable-background:new 0 0 480 360;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{font-family:proxima-nova,sans-serif;}
    .st2{font-size:6.2px;}
</style>
<text transform="matrix(0.9901 -0.1401 0.1401 0.9901 169.9463 135.1168)" class="st0 st1 st2">Newport</text>
</svg>

<svg class="customizable-svg--logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 480 360" style="enable-background:new 0 0 480 360;" xml:space="preserve">
<image class="frames-custom-logo" style="overflow:visible;" width="4035" height="1265" xlink:href="https://byebluelight-com.myshopify.com/cdn/shop/files/logo-light.svg" transform="matrix(4.057991e-03 -6.425153e-04 6.425153e-04 4.057991e-03 389.7445 179.6914)">
</image>
</svg>

    </div>
    <button class="product__media-toggle quick-add-hidden product__media-zoom-hover" type="button" aria-haspopup="dialog" data-media-id="35123680182576">
      <span class="visually-hidden">
        Open media 1 in modal
      </span>
    </button>
  </modal-opener></div>

        </div>

Specifications: