0

ユーザーがハードドライブから画像を選択し、サーバーに送信せずにブラウザでこの画像を使用できるようにする方法はありますか?

このトリミングされた画像をサーバーに送信する前に、ユーザーが画像をトリミングできるようにするため、これが必要です (したがって、投稿と数バイトのデータを保存します)。

私がやろうとしたことは、入力タイプのファイルを使用して送信イベントをキャプチャすることですが、入力からの値は単なる偽のパスです (役に立たない)。

どんな助けでも大歓迎です。

4

5 に答える 5

5

Here is a very basic example (with many globals, without input validation...) of image scaling: http://jsfiddle.net/89HPM/3/ . It's using the File API and a canvas element. As @anu said the save can be done using toDataUrl method of the canvas. In similar way you can achieve crop.

JavaScript

(function init() {
    document.getElementById('picture').addEventListener('change', handleFileSelect, false);
    document.getElementById('width').addEventListener('change', function () {
        document.getElementById('canvas').width = this.value;
        renderImage();
    }, false);
    document.getElementById('height').addEventListener('change', function () {
        document.getElementById('canvas').height = this.value;
        renderImage();
    }, false);
}());

var currentImage;

function handleFileSelect(evt) {
    var file = evt.target.files[0];
        if (!file.type.match('image.*')) {
            alert('Unknown format');
        }
    var reader = new FileReader();

    reader.onload = (function(theFile) {
        return function(e) {
            currentImage = e.target.result;            
            renderImage();
        };
    })(file);

    reader.readAsDataURL(file);
 }

function renderImage() {
    var data = currentImage,
        img = document.createElement('img');
    img.src = data;
    img.onload = function () {
    var can = document.getElementById('canvas'),
        ctx = can.getContext('2d');
        ctx.drawImage(this, 0, 0, can.width, can.height);
    };
}​

HTML

<input type="file" name="picture" id="picture" /><br />
<input type="text" id="width" value="200" />
<input type="text" id="height" value="200" /><br />
<canvas width="200" height="200" style="border: 1px solid black;" id="canvas"></canvas>​

Here is a blog post which I made about that basic example: blog.mgechev.com

于 2012-11-01T13:26:34.233 に答える
4

新しい HTML5 ファイル API は、おそらく探しているものに最も近いソリューションです。

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Javascript 内でファイルを参照して読み取ることができます。好きなように処理して、サーバーにアップロードします。これ以外のことは、実際には非常にトリッキーであり、おそらくサーバーへの往復は避けられません。

ここでの欠点はブラウザのサポートです.....いつものように

于 2012-11-01T13:07:59.693 に答える
2

どのブラウザが完全に動作するかわかりませんHTML5DnDFile API. を使用して作業できる手順を紹介しますFileAPI

  1. DnD API:ユーザーがマウスを離し、マウスアップ イベントが発生すると、ドロップ イベントで開始します。
  2. DnD API:DataTransferドロップ イベントからオブジェクトを取得する
  3. File API:を呼び出して、ドロップされたファイルのリストを表すDataTransfer.filesを取得します。FileList
  4. File API:すべての個々の File インスタンスを繰り返し処理し、FileReaderオブジェクトを使用してそのコンテンツを読み取ります。
  5. ファイル API:呼び出しを使用するFileReader.readAsDataURL(file)と、ファイルが完全に読み取られるたびに、新しい「データ URL」(RFC 2397)形式のオブジェクトが作成され、それをラップするイベントがオブジェクトのonloadハンドラーに発行されFileReaderます。参考までに: 「<code>data URL」オブジェクトは、Base64 でエンコードされたバイナリ データであり、仕様で定義された文字列のヘッダー シーケンスがあります。ブラウザはそれらを理解しています。

  6. HTML5 DOM:画像hrefFile Data URL

于 2012-11-01T13:13:36.930 に答える
0

You can't, for the following reasons:

  • For the reasons stated in this post: Full path from file input using jQuery

  • The fact that if you even try to create an img element loading a local file path you'll get the error Not allowed to load local resource: in your browser's console.

  • The fact that once you have an image in place you can only alter it's appearance on screen and not alter the file on the system or send the altered image up to the server

  • You've stated that you need cross browser support, so HTML5 File API and Canvas API are out, even though they would only allow part of the functionality anyway.

于 2012-11-01T13:26:39.550 に答える