車の画像を選択またはアップロードしたり、ナンバープレートを入力したり、プレートを正しい場所に移動/サイズ変更/回転/傾けたりすることができるクライアントシステムを構築しました、その後、イメージをダウンロードします。html2canvas - iOSデバイスでクラッシュする
https://www.plate-trader.com/plate-preview/
それは私がテストしたすべてのデバイス上で見事に取り組んですべてです、最後の部分iPhone以外 - 画像をダウンロードするには - のページをクラッシュしてリロードすることになります。これは、Android、Windows、MacbookのSafariを含め、私がテストした他のデバイスでは起こりません。
問題の発生場所を正確に把握するためにいくつかのアラートを追加しました。また、ページがちょうどリロードされる前に2時を過ぎていないiPhoneでは、html2canvas機能が全く起動しないという問題があります。
コード：
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");
});
});
}
html2canvasの最新リリースの使用 - それはCSS3は私が必要とするどの変換のみをサポートしていたバージョンだとして、そして - - 0.5.0 - アルファ1を述べたように - エントリの事は完璧に動作しますAndroidの携帯電話、Windows、MacBookなどがあります。
iPhoneでこれが動作しない原因は何ですか？
（var iOS行のコードが何であるか疑問に思っている場合は、iOSを検出します。これらのデバイスは他のすべてのファイル（grrr！）の自動ダウンロードをサポートしていないため、ブラウザウィンドウユーザーが長押しして保存することができます。この部分を削除して、主要なiOSの問題を解決しようとしましたが、違いはありませんでした）。