1

キャンバスをローカル マシンに保存しようとしていますが、何も機能していません。以下のコードを確認してください。

    <!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }

    </style>

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  </head>

  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <img id="canvasImg" alt="Right click to save me!">
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');


       var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 69, 50);

       // draw cloud
      context.beginPath();
      context.moveTo(170, 80);
      context.bezierCurveTo(130, 100, 130, 150, 230, 150);
      context.bezierCurveTo(250, 180, 320, 180, 340, 150);
      context.bezierCurveTo(420, 150, 420, 120, 390, 100);
      context.bezierCurveTo(430, 40, 370, 30, 340, 50);
      context.bezierCurveTo(320, 5, 250, 20, 250, 50);
      context.bezierCurveTo(200, 5, 150, 20, 170, 80);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.strokeStyle = '#0000ff';
      context.stroke();
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

      var imageData = canvas.toDataURL();


    </script>
  </body>
</html>

このコード例では、画像とクラウドを排出しており、それを画像ファイルとして保存したいと考えています???

4

2 に答える 2

1

Sacho が述べたように、「キャンバスを汚染すると保存されなくなります。これは、サード パーティの Web サイトからのデータのキャプチャを防止するためのセキュリティ機能です。

1 つの回避策は、自分の Web サイトからすべての静止画像を提供することです。これは、サードパーティのサイトからの要求に応じてサーバーに画像をダウンロードさせ、データ ストリームを返すことで実現できます (あたかも独自のドメインにあるかのように)。そうすれば、ブラウザは事実上サーバーからのものであるため、汚染について何の不満もありません。

サーバー側のテクノロジーが何であるかはわかりませんので、特定の実装を提案することはできませんが、基本的には次のようなリクエストを生成できます。 

/imagerequest.php?url=http%3A%2F%2Fwww.html5canvastutorials.com%2Fdemos%2Fassets%2Fdarth-vader.jpg

ソース URL がパラメーターとして提供され、imagerequest.php (または aspx) などはサーバー スクリプトです。

于 2013-08-14T08:37:57.503 に答える
0

またはimageDataを介し​​てサーバーに送信してみてください。このようなもの：XMLHTTPRequestfetch

const canvas = document.getElementById('cvs');
const context = canvas.getContext('2d');
context.font = '26pt Arial';
context.fillText('Some example text!', 10, 40);

url = canvas.toDataURL();
fetch('/yoururl', { method: 'POST', body: new FormData(url)})
.then(res => console.log(res))

たぶん、このリンクも役立ちます

于 2013-08-14T10:18:58.430 に答える