search

cburgmer / rasterizeHTML.js

Renders HTML into the browser's canvas
http://cburgmer.github.io/rasterizeHTML.js
MIT License
2.45k stars 220 forks source link

Chrome 66+ / Firefox new Canvas implementation #201

Open ariccadonna opened 6 years ago

ariccadonna commented 6 years ago

Apparently the new Canvas render context implementation of newest Chrome 66 and later and the new Firefox can't render the image anymore on the canvas with the rasterizeHTML older implementation. This is the fix we should operate to have the library working again to latest browsers updates, but, at the moment, we have no resources to put on this issue, please, to the mantainers, have a look: https://developers.google.com/web/updates/2018/04/nic66#css-paint-api

cburgmer commented 6 years ago

Can you clarify whether something is already broken, or what exactly you think will break? The unit tests currently work in both current Chrome and Firefox on OSX for me, so it looks good to me.

ariccadonna commented 6 years ago

It's already broken, we're using the allinone version as a standalone js in our project. It's was working on chrome 65 (tested on several workstation) but after the update to chrome 66 (OSX and Win) it's no longer working.

The page we are rendering has inside the DOM an SVG element with an IMAGE tag like:

<div class="svg_node" style="width:100%;height:100%">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080" style="width: 100%; height: 100%;" preserveAspectRatio="xMidYMid meet">
      <g clip-path="url(#mask)">
         <g clip-path="url(#cp)" style="display: block;" transform="matrix(0.55,0,0,0.55,693.9992,288.9993)" opacity="1">
            <g class="png" style="display: block;" transform="matrix(1,0,0,1,0,0)" opacity="1">
               <image width="960px" height="840px" preserveAspectRatio="xMidYMid slice" xlink:href="http://via.placeholder.com/960x840"></image>
            </g>
         </g>
      </g>
      <defs>
         <clipPath id="mask">
            <rect width="1920" height="1080" x="0" y="0"></rect>
         </clipPath>
         <clipPath id="cp">
            <path d="M0,0 L960,0 L960,840 L0,840z"></path>
         </clipPath>
      </defs>
   </svg>
</div>

The image is self hosted with CORS enabled and if we remove the image tag from the DOM the render is working smoothly without any problem.