web-dev-qa-db-ja.com

JavaScriptを使用してローカル画像をブラウザーに読み込みますか？

私は現在、web-to-print、ポスター印刷アプリケーションのソリューションを開発しています。

私が含めたい機能の1つは、特定の画像のポスターを注文する前に、特定の画像を「編集」（トリミング/拡大縮小/回転）する機能です。

ユーザーが編集する前にリモートサーバーに画像をアップロードする必要がないように、次のことを知りたいと思います。

画像をリモートサーバーにアップロードせずに、（JavaScriptを使用して）クライアントマシンに保存されている画像をブラウザー/ブラウザーのメモリにロードして編集できますか？可能な場合、これはどのように行われますか？

おかげで、

BK

javascriptimage-processinguploading
23
kaese

Html/Javascriptを使用すると、ファイルアップロードHTMLコンポーネントを使用してのみファイルを選択できます（Flash/Silverlightは、これをラップして物事を簡単にしますが、サンドボックス化されています）

ただし、Javaアプレット（または最近では何と呼ばれていても））、ネイティブActiveXコントロール、または.Netコントロールを使用して、追加の機能を提供できます（これは、セキュリティ上の影響と必要なVM /ランタイムフレームワークなど）

Adobe Airまたは他のクライアント側のテクノロジーは機能する可能性がありますが、JavaScriptでこれを実行したいようです。この場合、ファイルをサーバーにアップロードし、そこから操作するのが最善の策です。

*[編集] 2010年以降、この質問に対する回答があったため、テクノロジーは進歩し、htmlはブラウザー内で作成および操作できるようになりました。新しい回答またはこれらの例を参照してください： http://davidwalsh.name/resize-image-canvashttp://deepliquid.com/content/Jcrop.html *

0
Mark Redman

ユーザーはサーバーに画像をアップロードする必要なく、画像を編集できます。

以下のリンクをご覧ください。とても簡単にできます。

Javascriptを使用してローカルファイルを読み取る

12
santhgates

はい、できます！ただし、それを行うには、ブラウザがローカルストレージをサポートしている必要があります。これはHTML5 APIなので、ほとんどの最新のブラウザーで実行できます。 localstorageは文字列データのみを保存できるため、画像をblob文字列に変更する必要があることに注意してください。あなたの画像ソースは次のようになります

これはあなたを助ける短いスニペットです！

                if(typeof(Storage)!=="undefined"){

                // here you can use the localstorage
                // is statement checks if the image is in localstorage as a blob string
                if(localStorage.getItem("wall_blue") !== null){

                var globalHolder = document.getElementById('globalHolder');
                var wall = localStorage.getItem('wall_blue');
                globalHolder.style.backgroundImage= "url("+wall+")";


                 }else{

                // if the image is not saved as blob in local storage
                // save it for the future by the use of canvas api and toDataUrl method
                var img = new Image();
                img.src = 'images/walls/wall_blue.png';
                img.onload = function () {

                var canvas = document.createElement("canvas");
                canvas.width =this.width;
                canvas.height =this.height;

                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0);
                var dataURL = canvas.toDataURL();
                localStorage.setItem('wall_blue', dataURL);

                };

            }}else{//here  you upload the image without local storage }

この短いスニペットがお役に立てば幸いです。 Localstorageは文字列データのみを保存するので、できません。

ちなみに、jcropを使用して画像をトリミングしている場合は、blobコードを画像からフォームに保存し、それを手動でサーバーに送信する必要があります。

幸運を！ ：D

2
twboc