0

私のキャンバスには、ローカルファイルまたはインターネットからの画像からプログラムで生成された画像があります。toDataURl 関数を使用して保存しようとすると、安全なエラーが発生します。結果を保存するにはどうすればよいですか (サーバーなしで js のみを使用)、それは可能ですか?

セキュリティルールについては知っていますが、このルールをバイパスする解決策があるかもしれません

必要に応じて、私のコードはすべてgithubにあります

4

1 に答える 1

1

恥！ユーザーにセキュリティを提供するために作成されたルールをバイパスしないでください。

CORS のセキュリティを満たし、必要なものを取得するための鍵は、キャンバスにロードする必要がある画像ファイルをユーザーが選択できるようにすることです。

ユーザーがファイルを選択すると、CORS セキュリティが満たされ、必要に応じてキャンバスを使用できます (canvas.toDataURL を使用してキャンバスを保存することを含む)。

ユーザーがローカル ドライブからファイルを選択できるようにする手順は次のとおりです。

  1. type="file" で html 入力要素を追加します
  2. ユーザーはこの要素の参照をクリックし、ファイルを選択します
  3. ユーザーが [OK] をクリックしたら、window.URL.createObjectURL を使用して、選択したファイルから URL を作成します。
  4. 新しい画像を作成し、そのソースを #3 で作成した URL に設定します。
  5. context.drawImage を使用して、キャンバスに新しい画像を描画します。
  6. 結果のキャンバスは CORS に準拠しているため、canvas.toDataURL が機能します。

コード例は次のとおりです。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    $("#fileInput").change(function(e){
        var URL = window.webkitURL || window.URL;
        var url = URL.createObjectURL(e.target.files[0]);
        var img = new Image();
        img.onload = function() {
                canvas.width=img.width;
                canvas.height = img.height;
                ctx.drawImage(img,0,0);
                ctx.fillStyle="black";
                ctx.fillRect(0,canvas.height-30,canvas.width,30);
                ctx.fillStyle="white";
                ctx.font="18px verdana";
                ctx.fillText("I'm OK with CORS!",5,canvas.height-8);
        }
        img.src = url;
    });

    $("#save").click(function(){
        var html="<p>Right-click on image below and Save-Picture-As</p>";
        html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
        var tab=window.open();
        tab.document.write(html);        
    });

}); // end $(function(){});
</script>
</head>
<body>
    <input type="file" id="fileInput">    
    <button id="save">Save</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2014-02-14T21:42:23.843 に答える