niklasvh / html2canvas

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

Not working on iOS devices #1422

Open Tomu6 opened 6 years ago

Tomu6 commented 6 years ago

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!

halbano commented 6 years ago

Having the same problem. Any advice on this?

Best regards.

MichaelIT commented 6 years ago

sam problem.

joellembert commented 6 years ago

Same problem

Harry-III commented 6 years ago

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

Her-ero commented 6 years ago

similar bug, not work.

iPhone 6 with IOS 11.2.1 iPhone X (unknow version

Yoann53 commented 5 years ago

same problem

Har-zheng commented 5 years ago

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

hcyhehe commented 5 years ago

same problem

AlexFoxJS commented 5 years ago

same

kzkhykw commented 4 years ago

Have the same problem.

babukrishna commented 4 years ago

Have the same issue

bhatidheeraj commented 4 years ago

Someone has a fix for it. Please share.

0xmaayan commented 4 years ago

any updates on this?

0xmaayan commented 4 years ago

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

pravnviji commented 4 years ago

@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.

kms0219kms commented 6 months ago

Still same problem. I use html2canvas by npm in Solid.js, so I am unavailable to install 2 CDN links.