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.

Problem 1: 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.”

Problem 2: In the zoomOut() method, the image itself is drawn fine, BUT the dot in not in the right position.

UPDATE: As can be seen in the code below, I added console.log statements to print out the width and height of the original image. In the offending browsers these values are half of what they should be. I’m now trying to figure out why.

Code:

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.

Source: Apple Documentation: Know iOS Resource Limits