Question

我为客户建立了一个系统，允许您选择或上传汽车图像，输入车牌，然后将印版移动/调整/旋转/倾斜到正确的位置，然后下载图像：

https://www.plate-trader.com/plate-preview/

在我测试过的每台设备上都能很好地工作，除了最后一部分 - 下载图像的iPhone - 崩溃页面并导致它重新加载。在我测试的任何其他设备上都不会发生这种情况，包括Android，Windows甚至是Macbook上的Safari。

我已经添加了一些数字警报以确切地查看问题发生的位置，并且在iPhone刚刚重新加载之前你没有超过2，这表明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 - 0.5.0-alpha1 - 因为它是唯一支持我需要的CSS3转换的版本，并且 - 如上所述 - 条目在Android手机，Windows和Macbook上完美运行。

知道iPhone上可能会阻止它工作吗？

（如果您想知道var iOS行周围的代码是什么，我会检测iOS，因为这些设备不支持自动下载其他所有文件（grrr！）并打开生成的图像用户长按并保存的浏览器窗口。我已经尝试完全删除这部分代码来解决主要的iOS问题，并没有区别。）

Answer 1

对于iphone我遇到同样的问题，我必须修复禁用的缩放放大以使图像显示在屏幕上，你可以看到这个解释为例Disable double-tap "zoom" option in browser on touch devices

html2canvas - 在iOS设备上崩溃

1 个答案: