IOS Iphone issue

[billybrad1985]

Hi Everyone,

Been having an issue for 2 days now which I cannot seem to figure out. I have noticed other people have come across the same issue which is creating an image from the base64 generated on iphone. Process works on all other browsers absolutely fine but generates a white image on iphone.

I have done the following already changed version of htm2canvas from rc.5 to rc.4, I have tried to use jsPDF to create the pdf first still no joy.

Just a bit of background on what i am trying to achieve. I have written an esign app which captures the users signature and then overlays it onto the document. I then want to get the image page and the signature and combine using html2canvas. As I said above works absolutely fine on all browsers except ios.

Here is some example code.

$(document).on('click', '.complete-signing', function() {
$('#completeModal').hide();
var html2canvasOptions = {
allowTaint: true,
removeContainer: true,
backgroundColor: null,
imageTimeout: 0,
logging: true,
scale: 2,
useCORS: true
};

      html2canvas(document.getElementById('20200609091014-1'), 
               html2canvasOptions).then(function(canvas) {
		 const contentDataURL = canvas.toDataURL('image/png');
		  $.ajax({
		  	type: 'POST',
		  	dataType: 'json',
		  	data: {img: contentDataURL, id: '20200609091014-1', uid: $('#uid').val()},
		  	url: ROOT_URL + 'sign/complete',
		  	success: function() {

		  	}
		});
  	  });

});

[billybrad1985]

Apologies not sure what has happened with rest of code above

[yiptsangkin]

same problem, i tried to change from rc.5 to rc.4, but i still not working, the image is empty, but the same code work on ios 13.3 is fine, after i update the system, it's wrong now.

[thierrydrc]

+1, same issue

[Yegorich555]

If I correctly understood the issue tied with wrong calculation positioning of rendered item (html2canvas wasn't good tested when we have scroll in the window). Maybe the following example will help you to fix an issue at first time.

html2canvas(el: HTMLElement, {
        height: el.offsetHeight,
        width: el.offsetWidth,
        x: left + window.scrollX, // todo it can be wrong when element inside parent with scroll
        y: top + window.scrollY, // todo it can be wrong when element inside parent with scroll
        scrollY: 0,
        scrollX: 0,
    }).then(canvas => { your code here })

[omeriko]

Same issue in my scenario too.
Html2canvas returns an empty image.
Anyone found the silver bullet?