HTML2Canvas giving blank images on IOS

Question

What my code does: I have an image and on above of that image I have various other images, few of which are hidden and few of which are shown (it is decided on runtime). So I'm using HTML2Canvas to convert my main div into an image and then downloading that image.

Problem: Image is perfectly downloaded on laptops, desktops and android phones BUT image comes blank on IOS.

Testing link: http://testing.mabdurrehman.com/ -> You may click on items to place on vest, save vest, view vest and then try downloading on IOS.

JS Code:

 <script>
    var img;
    html2canvas($('#vests-section'), 
    {
        onrendered: function(canvas) 
        {
            img = canvas.toDataURL();
        }
    });

    function download_img(el) {
        el.href = img;
    }

Any help would be highly aprreciated.

Let me know if there's any other good logic!

Thank you :)

Answer 1

If the goal is ultimately to print the image, then I suggest looking into a server side html to image/pdf rendering/generating solution, such as mpdf, to avoid the hassle.