Html2canvas: Not working on iOS devices

Created on 30 Jan 2018 · 15Comments · Source: niklasvh/html2canvas

Hello,

I´m using html2canvas with Wordpress. It works fine on every desktop/android device but iOS is not working. I have tested iPhone SE (iOS 11.2.1) Safari/Chrome and iPad 2 (iOS 9.3.5) Safari/Chrome. I´m using 1.0.0-alpha.9 html2canvas. It returns only white background as img. You can test it here - http://konf.inforadar.sk - "Uložit do galerie" is a save to gallery button and in top right corner is a gallery (galeria).

Code:

<script src="inc/html2canvas.min.js"></script>
<script type="text/javascript">
jQuery(document).on("click", "#vpc-add-to-cart", function(event) { takeScreenshot(); event.stopImmediatePropagation(); } );
function takeScreenshot() {
    var element = jQuery("#vpc-preview")[0];
    html2canvas(element, { "background": "#FFFFFF" }).then(function(canvas) {
        var imgData = canvas.toDataURL('image/jpeg',1.0);
        jQuery.ajax({
            url: 'gallery/save.php',
            type: 'post',
            dataType: 'text',
            data: { base64data: imgData }
        });
        window.alert('Uloženo!');
    });
}
</script>

Any advice? Thank you very much!

Source

Tomu6

👍1

Most helpful comment

found this solution.

 var s = document.createElement("script");
  if(isSafari()){
    s.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.min.js";
  }else{
    s.type = "text/javascript";
    s.src = "js/scripts/html2canvas.js"; // version html2canvas 1.0.0-rc.7
  }

  $("head").append(s);

https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.min.js seems to be working on safari/IOS devices but not on chrome/android

msbir on 15 Aug 2020

❤1 🎉1 👍1

All 15 comments

Having the same problem. Any advice on this?

Best regards.

halbano on 25 May 2018

sam problem.

MichaelIT on 28 May 2018

Same problem

joellembert on 2 Aug 2018

I have the same problem now, have you a idea of the problem ,guys ? Thank you.

Harry-III on 17 Sep 2018

similar bug, not work.

iPhone 6 with IOS 11.2.1
iPhone X (unknow version

Her-ero on 16 Oct 2018

same problem

Yoann53 on 14 Dec 2018

Yes, I have the same problem. I hope someone can solve it.

Har-zheng on 13 Jun 2019

same problem

hcyhehe on 15 Jul 2019

same

AlexFoxJS on 3 Dec 2019

Have the same problem.

kzkhykw on 18 Dec 2019

Have the same issue

babukrishna on 4 Feb 2020

Someone has a fix for it. Please share.

bhatidheeraj on 1 May 2020

any updates on this?

msbir on 14 Aug 2020

found this solution.

 var s = document.createElement("script");
  if(isSafari()){
    s.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.min.js";
  }else{
    s.type = "text/javascript";
    s.src = "js/scripts/html2canvas.js"; // version html2canvas 1.0.0-rc.7
  }

  $("head").append(s);

https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.min.js seems to be working on safari/IOS devices but not on chrome/android

msbir on 15 Aug 2020

❤1 🎉1 👍1

@msbir

Thanks for sharing this solution. For Safari, it's working now with [ 1.0.0-rc.7 js]

Is there is any generic library for both browsers? Currently, I'm using this library for Android and IOS [ Chrome and Safari ] for hybrid mobile application.

Now to achieve this I'm loading 2 different html2canvas.min.js. If you could share common js [ CDN link ] which support both platforms it will be very helpful to optimize the app.