Certain mobile browsers on iPhone not executing Javascript properly

Question

I am attempting to run javascript returned from a URL that I load in a UIWebView. The script takes an image and draws a dot on it to show a users location.

In Mobile Safari, UIWebView, and Google Chrome Mobile the image is not generated correctly and the dot is in the wrong place.

In Desktop Safari, Chrome, Opera Mini, and the Android version of my app it works fine.

I need assistance getting this to work in a UIWebView/Mobile Safari.

The call to context.drawImage() in the zoomIn() method generates the following error in the debug console for Mobile Safari: "Javascript Error. undefined. INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value." 在zoomIn（）方法中对context.drawImage（）的调用在Mobile Safari的调试控制台中生成以下错误：“ Javascript错误。未定义。INDEX_SIZE_ERR：DOM异常1：索引或大小为负数，或大于允许的值。”

In the zoomOut() method, the image itself is drawn fine, BUT the dot in not in the right position. 在zoomOut（）方法中，图像本身绘制得很好，但点不在正确的位置。

As can be seen in the code below, I added console.log statements to print out the width and height of the original image. 从下面的代码中可以看出，我添加了console.log语句以打印出原始图像的宽度和高度。 In the offending browsers these values are of what they should be. 。 I'm now trying to figure out why.

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

If you have read my entire post (excluding the code) you will know that I eventually discovered that the dimensions of the original image on the iPhone we're half of what they were in the other browsers.

This is caused by a limit Apple has placed on the size of an image that can be downloaded, which is 3 Megapixels. My image was larger than that. But the Javascript made references to parts of the image that (on iOS) we're beyond its bounds.

Apple Documentation: Know iOS Resource Limits Apple文档：了解iOS资源限制