JavaScriptを使用してローカル画像をbase64に変換する

Question

Iamはhtmlでプロジェクトを行っています。 イメージをbase64に変換する関数があります。以下のコードを参照してください。

function getBase64Image() 
{ 
    p = document.getElementById("picField").value; 
    img.setAttribute('src', p); 
    var canvas = document.createElement("canvas"); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 
    var dataURL = canvas.toDataURL("image/png"); 
    var r = dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
    base64 = r; 
    alert(base64); 
} 

が、私は私のウェブサイトを展開したときに問題が、ある は私がそのが機能していない、IIS上で私のHTMLファイルを置かれたとき、それはIVBのような完全なベース64のフォーマットを示しているローカルファイルシステムで意味を意味し.... 、 しかし、iis上ではbase64コードをちょうど "base"として与えています。 だから私は知っていないiisで動作していないので、私を助けてください、私もiisで動作するhtmlファイルを送信してください。

Answer 1

私はあなたがSame Origin Policy問題を持っているかなり確信しています。

IISでページを実行すると、ローカルではなく別のコンテキストで実行されます。file://ではなく、http://で実行されます。何をしようとする

は、ローカルの画像ファイルを取得し、リモートサイト上のキャンバスにロードされます。セキュリティ上の理由から従来のJavaScriptを使用することはできません。 （これはローカルでもどのように動作するのか分かりませんが、とにかくそれは避けてください）

HTML 5 file APIを使用すると、JavaScriptがローカルファイルに直接アクセスできるようになります。私は関連するいくつかの質問を掘り下げることができるかどうかを見ていきます。

更新：これは役立つはず：

• How can I draw an image from the HTML5 File API on Canvas?