2

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

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

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

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

问题 1： zoomIn() 方法中对 context.drawImage() 的调用在 Mobile Safari 的调试控制台中生成以下错误：“Javascript Error. undefined. INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than允许的值。”

问题 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";
}
4

1 回答 1

0

如果您阅读了我的整篇文章（不包括代码），您就会知道我最终发现 iPhone 上原始图像的尺寸是其他浏览器中的一半。

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

资料来源：Apple 文档：了解 iOS 资源限制

于 2012-07-04T07:17:39.240 回答