javascript - iPhone 上的某些移动浏览器无法正确执行 Javascript

Question

我正在尝试运行从我在 UIWebView 中加载的 URL 返回的 javascript。该脚本获取一张图像并在其上绘制一个点以显示用户位置。

在 Mobile Safari、UIWebView 和 Google Chrome Mobile 中，图像生成不正确，点在错误的位置。

在 Desktop Safari、Chrome、Opera Mini 和我的应用程序的 Android 版本中它运行良好。

我需要帮助让它在 UIWebView/Mobile Safari 中工作。

问题 1: 在 zoomIn() 方法中调用 context.drawImage() 在 Mobile Safari 的调试控制台中生成以下错误:“Javascript 错误。未定义。INDEX_SIZE_ERR:DOM 异常 1 : 索引或大小为负数，或大于允许值。"

问题 2: 在 zoomOut() 方法中，图像本身绘制得很好，但是点的位置不正确。

更新: 从下面的代码中可以看出，我添加了 console.log 语句来打印出原始图像的宽度和高度。在有问题的浏览器中，这些值是应有值的一半。我现在正试图找出原因。

代码:

window.onload = function zoomIn() {
    var canvas = document.getElementById("area");
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    var px = 1988;
    var py = 734;
    imageObj.src = "IMAGE URL GOES HERE";
    imageObj.onload = function() {
      canvas.width=640;
      canvas.height=480;
      if(px-canvas.width<0 || py-canvas.height<0){
          canvas.width=500;
          canvas.height=300;
      }

      console.log(imageObj.height);
      console.log(imageObj.width);

      context.drawImage(imageObj, px-canvas.width, py-canvas.height, canvas.width*2, canvas.height*2,0,0,canvas.width,canvas.height);


      context.beginPath();
      context.arc(canvas.width/2, canvas.height/2, 10, 0, 2 * Math.PI, false);
      context.fillStyle = "red";
      context.fill();
      context.lineWidth = 3;
      context.strokeStyle = "black";
      context.beginPath();
      context.font = "10pt Calibri";
      context.fillStyle = "black"
      context.textAlign = "center";
      context.fillText("You Are Here", canvas.width/2, canvas.height/2+20);
      context.stroke();
    };
  document.form1.button2.style.visibility="hidden"
  document.form1.button1.style.visibility="visible";
};

function zoomOut(){
   var canvas = document.getElementById("area");
   var context = canvas.getContext("2d");
   var imageObj = new Image();
   var px = 1988;
   var py = 734;
   imageObj.src = "IMAGE URL GOES HERE";
   imageObj.onload = function(){
      canvas.width=imageObj.width
      canvas.height=imageObj.height
      context.drawImage(imageObj,0,0);

      context.arc(px, py, 20, 0, 2 * Math.PI, false);
      context.fillStyle = "red";
      context.fill();
      context.lineWidth = 3;
      context.strokeStyle = "black";

      context.beginPath();
      context.rect(0, 0, canvas.width, canvas.height);
      context.font = "15pt Calibri";
      context.fillStyle = "black";
      context.textAlign = "center";

      context.fillText("You Are Here",px,py+25);
      context.stroke();
   };
   document.form1.button1.style.visibility="hidden"
   document.form1.button2.style.visibility="visible";
}

Answer 1

如果您阅读了我的整篇博文(不包括代码)，您就会知道我最终发现 iPhone 上原始图像的尺寸是另一个尺寸的 一半浏览器。

这是由于 Apple 对可下载图像的大小设置了限制，即 3 兆像素。我的形象比那个大。但是 Javascript 引用了(在 iOS 上)我们超出其范围的图像部分。

来源: Apple Documentation: Know iOS Resource Limits