5

2つの部分からなる質問...

基本的に、1日の終わりにfile <input>、ユーザーがファイルシステムから画像ファイルを選択できるようにします。次に、それをimgタグでページに表示し直します。後で処理する必要があるのでdata:、下がる道ではないことを知っています。それはblob:、X-originであるかどうかを、googlefuで理解できないままになっているようです。

それで、blob:X-originと見なされますか？URIとして<img>'を使用している場合、それを使用できますか？@srcblob:getImageData()

もしそうなら、あなたはこれをどのように実行しますか？方法を知っていれば、それはおそらく非常に簡単だと思いますが、繰り返しになりますが、私のgooglefuは私を失敗させています...

それで：

  • blob:X-originですか？
  • そうでない場合、の内容blob:からURIをどのように導き出しますか？file <input>
4

2 に答える 2

7

またはオブジェクトから-URIURL.createObjectURLを生成するために使用します。blob:FileBlob

基本的なデモ：http：//jsfiddle.net/HGXDT/

​&lt;input type="file" id="file">​​​​​​​​​​​​​​&lt;img id="preview">​​​​​​​​​​​​​​

window.URL = window.URL || window.webkitURL || window.mozURL;
document.getElementById('file')​.onchange = function() {
    var url = URL.createObjectURL(this.files[0]);
    console.log(url);
    document.getElementById('preview').src = url;
};​

スクリプトが同一生成元ポリシーに準拠しているかどうかを確認するためのコード（回答：そうではありません）。（実際には、ページ自体はblob:-URIを作成したため影響を受けませんが、他のページはblob:キャンバスにURIを描画して使用することはできません）：http：
//jsfiddle.net/HGXDT/1/

<input type="file" id="file">
<img id="preview">
<canvas id="canvas"></canvas>
​
window.URL = window.URL || window.webkitURL || window.mozURL;
document.getElementById('file').onchange = function() {
    var url = URL.createObjectURL(this.files[0]);
    console.log(url);
    
    var img = document.getElementById('preview');
    canvasSOPTest(img, url);
};
// See console. SOP error has to show up
canvasSOPTest(new Image(), 'http://stackoverflow.com/favicon.ico?'+new Date());

function canvasSOPTest(img, url) {
    // Same Origin Policy check
    img.onload = function() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        console.log('Painting image...');
        ctx.drawImage(img, 0, 0);
        console.log('Attempting to get image data');
        try {
            ctx.getImageData(0, 0, canvas.width, canvas.height);
            console.log('Success! No errors');
        } catch (e) {
            console.log(e);
        }
    };
    img.src = url;
}
于 2012-07-29T11:33:13.757 に答える
1

HTML5ファイルApiを使用して画像を表示し、その画像をアップロードするか、それともアップロードする必要がありますか？

これは、FileApiを使用して画像をプレビューする方法の良い例です。

http://html5demos.com/file-api/

于 2012-07-29T11:27:52.457 に答える