2

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 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 ドキュメント: Know iOS Resource Limits

于 2012-07-04T07:17:39.240 に答える