ユーザーがハードドライブから画像を選択し、サーバーに送信せずにブラウザでこの画像を使用できるようにする方法はありますか?
このトリミングされた画像をサーバーに送信する前に、ユーザーが画像をトリミングできるようにするため、これが必要です (したがって、投稿と数バイトのデータを保存します)。
私がやろうとしたことは、入力タイプのファイルを使用して送信イベントをキャプチャすることですが、入力からの値は単なる偽のパスです (役に立たない)。
どんな助けでも大歓迎です。
ユーザーがハードドライブから画像を選択し、サーバーに送信せずにブラウザでこの画像を使用できるようにする方法はありますか?
このトリミングされた画像をサーバーに送信する前に、ユーザーが画像をトリミングできるようにするため、これが必要です (したがって、投稿と数バイトのデータを保存します)。
私がやろうとしたことは、入力タイプのファイルを使用して送信イベントをキャプチャすることですが、入力からの値は単なる偽のパスです (役に立たない)。
どんな助けでも大歓迎です。
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
新しい HTML5 ファイル API は、おそらく探しているものに最も近いソリューションです。
http://www.html5rocks.com/en/tutorials/file/dndfiles/
Javascript 内でファイルを参照して読み取ることができます。好きなように処理して、サーバーにアップロードします。これ以外のことは、実際には非常にトリッキーであり、おそらくサーバーへの往復は避けられません。
ここでの欠点はブラウザのサポートです.....いつものように
どのブラウザが完全に動作するかわかりませんHTML5
がDnD
、File API
. を使用して作業できる手順を紹介しますFileAPI
。
DataTransfer
ドロップ イベントからオブジェクトを取得するDataTransfer.files
を取得します。FileList
FileReader
オブジェクトを使用してそのコンテンツを読み取ります。ファイル API:呼び出しを使用するFileReader.readAsDataURL(file)
と、ファイルが完全に読み取られるたびに、新しい「データ URL」(RFC 2397)形式のオブジェクトが作成され、それをラップするイベントがオブジェクトのonload
ハンドラーに発行されFileReader
ます。参考までに: 「<code>data URL」オブジェクトは、Base64 でエンコードされたバイナリ データであり、仕様で定義された文字列のヘッダー シーケンスがあります。ブラウザはそれらを理解しています。
HTML5 DOM:画像href
をFile Data URL
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.