0

私は次の方法を使用しています:-

コード

<!DOCTYPE HTML>
<html>
<head>
  <style>
   body {
     margin: 0px;
      padding: 0px;
   }
   #myCanvas {
     border: 1px solid #9C9898;
   }
  </style>
 <script>
  window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();

    imageObj.onload = function() {
      context.drawImage(imageObj, 69, 50);
    };
    imageObj.src = "C:\Images\Demo.jpg";
  };

</script>
</head>
<body>
  <canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>

この画像をキャンバスにロードしたい。imageObj.src で画像 URL を渡すのは正しい方法ですか?

または、画像をロードする他の方法はありますか?

前もって感謝します

4

1 に答える 1

3

あなたはそれをほぼ正しく持っています。ファイルをローカルにロードする場合は、パスに次のプレフィックスを付ける必要がありますfile:///。

imageObj.src = "file:///C:/Images/Demo.jpg";  // also, use forward slashes, not backslashes

すべてのブラウザーで、現在の HTML ページと同じディレクトリまたはサブディレクトリに画像を保存する必要があると思います。これにより、ローカルの HTML ページがハード ドライブ全体から何かを取得することができなくなります。

現在の HTML ドキュメントに相対的なパスを作成することをお勧めします。ページが にある場合は、file:///C:/Users/shanky/webpages/page.html次を使用します。

imageObj.src = "img/Demo.jpg";

にある画像をロードしますfile:///C:/Users/shanky/webpages/img/Demo.jpg。file:これにより、ページを新しいフォルダーに移動するか、プロトコルを使用しなくなったサーバーでホストする場合に簡単になります。

ほとんどのブラウザーは、リソースの同一生成元ポリシーfile:について非常に細かいことに注意してください。単純なローカル サーバーでアプリケーションをホストし、 でアクセスする方が簡単な場合がありますhttp://localhost。

于 2012-07-25T07:26:57.693 に答える