I have built a system for a client which allows you to select or upload an image of a car, type a number plate in, then move/resize/rotate/skew the plate into the correct place, then download the image:
https://www.plate-trader.com/plate-preview/
It's all working beautifully on every device I've tested on, except an iPhone where the final part - downloading the image - crashes the page and causes it to reload. This doesn't happen on any other device I've tested on, including Android, Windows and even Safari on a Macbook.
I've added some number alerts in to see exactly where the issue occurs and on iPhone you don't get past 2 before the page just reloads itself, which indicates a problem with the html2canvas function triggering at all.
Code:
document.ready(function()
{
$("#previewSaveImage").click(screenShot);
});
function screenShot()
{
alert("1");
$("#previewSaveImage").attr("disabled", "true").val("Downloading...");
alert("2");
html2canvas($("#previewImageFullContainer")).then(function(canvas)
{
alert("3");
var dataURL = canvas.toDataURL();
alert("4");
$.post("savePNG.php", {"data": dataURL}, function(response)
{
alert("5");
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
alert(iOS);
if(iOS==true)
{
alert("Your image will now open in this browser window. To save it, long-press and choose Save Image.\n\nTo return to the main site, press back in your browser.");
document.location='/preview_images/'+response;
}
else
{
window.location.href='/preview_images/download.php?img='+response;
}
alert("6");
$("#previewSaveImage").removeAttr("disabled").val("Download Image");
alert("7");
});
});
}
Using the latest release of html2canvas - 0.5.0-alpha1 - as it's the only version which supports CSS3 transforms which I need, and - as stated - the entries thing works perfectly on an Android phone, Windows and Macbook.
Any idea what on iPhone might be preventing this from working?
(If you're wondering what the code is around the var iOS lines are, I detect iOS as those devices don't support automatic downloading of files like everything else (grrr!) and open the generated image in the browser window for the user to long-press and save. I've tried removing this part of code altogether to solve the main iOS issue, and it made no difference).
