16

私はこれを持っていると思ったが、違います。目標は、写真 (保険証) を撮ってローカルに保存し、後で取得することです。

// Get a reference to the image element
var elephant = document.getElementById("SnapIt_mobileimage_5");

var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");

// Make sure canvas is as big as the picture
imgCanvas.width = elephant.width;
imgCanvas.height = elephant.height;

// Draw image into canvas element

imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height );
 console.log( 'Did that' );
// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("data:image/jpg;base64,");

// Save image into localStorage
try {
localStorage.setItem("elephant", imgAsDataURL);
}
catch (e) {
console.log("Storage failed: " + e);
}; 

//Did it work?
var pic = localStorage.getItem("elephant");

console.log( elephant );
console.log( pic );

各ステップが成功すると、最終的な出力は次のようになります。

<img id="SnapIt_mobileimage_5" class=" SnapIt_mobileimage_5" name="mobileimage_5" dsid="mobileimage_5" src="files/views/assets/image/IMG_0590.JPG">
 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA

新しいページで、私が尋ねると

var policy_shot = localStorage.getItem( 'elephant' );
console.log( policy_shot );

$('#TestScreen_mobileimage_1').src = policy_shot ;

バイナリをログに記録します。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg ....

しかし、画像が表示されません。

  1. より簡単なアプローチはありますか？
  2. getItem (バイナリ) の前に data:image/png; があるのはなぜですか? data:image/jpg の代わりに ?
  3. それが表示されないのはなぜですか、それとも何か間違ったことをしていますか?
4

2 に答える 2

2

File Api を使用した完全なソリューションはこちら

    <html>
    <本体>
    <input type="ファイル" id="画像入力" />
    <img id="イメージコンテナ" />
    <script type="text/javascript">
    （関数（）{
          /** @type {ノード} */
      var imgInput = document.getElementById( "画像入力" ),
          /** @type {ノード} */
          imgContainer = document.getElementById( "イメージコンテナ" ),
          /** ローカル ストレージからイメージ src を復元します */
          updateUi = 関数() {
            imgContainer.src = window.localStorage.getItem( "image-base64" );
          }、
          /** イベントリスナーの登録 */
          bindUi = 関数(){
            imgInput.addEventListener( "変更", function(){
              if ( this.files.length ) {
                var リーダー = 新しい FileReader();
                reader.onload = function( e ){
                  window.localStorage.setItem( "image-base64", e.target.result );
                  updateUi();
                };
                reader.readAsDataURL( this.files[ 0 ] );
              }
            }、 間違い ）;
          };

    updateUi();
    bindUi();
    }());
    </script>
    </body>
    </html>
于 2014-03-06T11:23:24.127 に答える