

js初心者です。  
HTML5のcanvasを使って  
読み込んだ画像に何かしらの装飾(fillTextなどで画像にテキストを描画)を行い、  
canvasごとpngなどの形式で書き出したいと考えています。

しかし、下記エラーが出て上手く書き出せません。ご教示いただけますと幸いです。

[code]

    Script from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access.
    
[/code]

ソースコードは以下のとおりです。

# index.html

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>読み込んだ画像にテキストを描画</title>
      <script src="myscript.js" crossorigin="anonymous"></script>
    </head>
    <body>
    <h1>読み込んだ画像にテキストを描画</h1>
    <form>
    <input type="button" value="canvasに描画" onclick="draw()">
    </form>
    <canvas id="mycanvas" width="400" height="400">
      Canvasに対応したブラウザを使用してください。
    </canvas>
    <!-- <form>
    <input type="button" value="画像に変換" onclick="chgImg()">
    </form> -->
    <div><img id="newImg"></div>
    </body>
    <script src="myscript.js"></script>
    </html>
    
[/code]

# myscript.js

[code]

    var canvas = document.getElementById('mycanvas');
    var ctx = canvas.getContext('2d');
    
    function draw(){
      var img = new Image();
      //ローカルの画像を読み込む
      img.src = 'test.png';
      img.onload = function () {
        ctx.globalCompositeOperation = 'destination-over';
        var pattern = ctx.createPattern(img, 'no-repeat');
        ctx.fillStyle = pattern;
        ctx.drawImage(img, 10, 10);
      }
      ctx.font = 'bold 20px Verdana';
      ctx.textAlign = 'left';
      ctx.fillStyle = 'red';
      ctx.fillText('test', 20, 20, 200);
      var dataURL = canvas.toDataURL();
      document.getElementById("newImg").src = dataURL;
      console.log(dataURL);
      chgImg();
    }
    
    // 取得したtoDataURL()をpngに変換
    function chgImg() {
      var png = canvas.toDataURL();
      document.getElementById("newImg").src = png;
    }
    
[/code]


CC BY-SA 3.0
2016-02-28T09:22:27.963
22632
2016-06-27T23:49:44.390
14587
question
javascript html5 cors
html5のcanvasを使って画像を読み込み、読み込んだ画像に装飾し、pngなどの形式で書きだしたい


index.htmlについて、以下の2点を修正してみてください。

  * head要素内にあるscript要素を削除する。
  * body要素の閉じタグの位置を正しくする。

これで動作するようになります。以下のようになるでしょう。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>読み込んだ画像にテキストを描画</title>
    </head>
    <body>
    <h1>読み込んだ画像にテキストを描画</h1>
    <form>
    <input type="button" value="canvasに描画" onclick="draw()">
    </form>
    <canvas id="mycanvas" width="400" height="400">
      Canvasに対応したブラウザを使用してください。
    </canvas>
    <!-- <form>
    <input type="button" value="画像に変換" onclick="chgImg()">
    </form> -->
    <div><img id="newImg"></div>
    <script src="myscript.js"></script>
    </body>
    </html>
    
[/code]

ちなみに、もしChromeから「ファイルを開く」でindex.htmlを開いた場合は、script要素のcrossorigin属性は削除してください。今回のコードの場合に開こうとしているtest.pngは同じドメインから読み込まれるので、そもそもcrossorigin属性の指定は必要ありません。仮にcrossdomain属性を使ってCORSを適用したい場合は、「ファイルを開く」ではなく、何らかのウェブサーバに配置して"http://"で読み込む必要があります。


CC BY-SA 3.0
2016-02-29T00:18:04.047
22645
2016-02-29T00:18:04.047
531
22632
answer